easy_widgets 🤖

Simplified and quick access to most used widget with easy access to extenstions and functions/helpers which are responsive in nature.

Features	Description
Responsive	Every easy widgets are responsive in nature. Other nums can be responsive by using '.hWise' or '.wWise' extension.
Simplified Widgets	Simplified widgets to configure faster and easier like EasyContainer, EasyScrollList, and more.
Multiple push/pushNamed	Can push multiple pages at once with animation, commonly used for deep linking or app linking.
Page transitions	Easy page transitions with multiple animations.
Easy Mixin support	Gives you access to multiple common used functions simplified, like showing loading indicator while future, snackbars, dialog and more.
Easy extensions	Multiple extensions to make code faster, these extensions helps in responsiveness. The extensions works on list, context, nums, Widgets and more

Installation

flutter pub add easy_widgets

or

dependencies:
  easy_widgets: ^0.0.4

Import

All you need is a single import:

import 'package:easy_widget/easy_widget.dart';

Initialize(MUST!)

For the responsive functionality, you need to initialize the easy widget first.
There are two ways to initialize the easy widget.

1. If your app is never going to change its dimensions(like in Android or Ios), then you can initialize the easy widget in the main.dart file inside build function of your app like this.

EasyWidget.initiate(context);

import 'package:easy_widget/easy_widget.dart';
/*
.
rest of the code
.
*/
@override
  Widget build(BuildContext context) {
EasyWidget.initiate(context(
      context,
      designHeight: 720, // design height(optional)
      designWidth: 360, // design width(optional)
    ); // Must initialize the easy widget here.

return YOURWIDGET(
  /*
  .
  your code
  .
  */
    );
  }

2. If your app is going to change its dimensions(like in web), then you should initialize the easy widget with the help of easy mixin.

Use EasyMixin with your page stateful class and it will automatically initialize the easy widget.

with EasyMixin

import 'package:easy_widget/easy_widget.dart';
/*
.
rest of the code
.
*/
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with EasyMixin { // Must extend the State class with EasyMixin
/*
.
rest of the code
.
*/
}

However if you're willing to pass the design dimensions, you can pass them in init like this:

@override
  void initState() {
    setDesignDimension(360, 720);// put your design width and height here
    super.initState();
  }

Responsive

Every easy widget is responsive in nature. Other nums can be responsive by using '.hWise' or '.wWise' extension.

For example:

Container(
  height: 200.hWise, // height will be adjusted accrding to the height of the screen,
  width: 200.wWise, // width will be adjusted according to the width of the screen,
);

You can use the same with Texts, Buttons, Padding, etc.

For example:

Text(
  'Lorem ispum',
  style: TextStyle(
    fontSize: 14.hWise, // Text will be adjusted according to the height of the screen,
  ),
);

Simplified Widgets

There are few simplified widgets to configure faster and easier like. There documentation are provided for each widget to help you understand how to use it.

Widgets avaiable:

• EasyContainer() // can be used as button, add splash effect, animations and much more
• EasyScrollList() // Easily create list, with pagination, optional scroll, separator and much more.
• EasyGesture() // Easily handle complex getures like swipe.
• EasyInkTap() // Handle ink tap, add ripple effect easily.
• EasyPadding() // Easy customizable padding to your widget.

Multiple push/pushNamed

You can push multiple pages at once with animation, commonly used for deep linking or app linking.

import 'package:easy_widget/easy_widget.dart';
/*
.
rest of the code
.
*/
void pushMultiplePages(){
  context.pushAll(
    [Page1(), Page2(), Page3()],
    transitionType: EasyTransitionType.rightToLeft, // define the transition type/animation
  );
}

To push multiple named routes at once, you can use pushNamed method. Also, you need to return EasyPageTransition in your generateRoute funcnction

For example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Widgets exaple',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: "Multiple pushNamed",
      ),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/first':
            return EasyPageTransition(
              child: Scaffold(
                appBar: AppBar(
                  title: Text('First'),
                ),
              ),
              type: EasyTransitionType.bottomToTop,
              settings: settings,
            );
          case '/second':
            return EasyPageTransition(
              child: Scaffold(
                appBar: AppBar(
                  title: Text('Second'),
                ),
              ),
              type: EasyTransitionType.bottomToTop,
              settings: settings,
            );
          default:
            return EasyPageTransition(
              child: Scaffold(
                appBar: AppBar(
                  title: Text('404'),
                ),
                body: Text('Route not Found').alignC,
              ),
              type: EasyTransitionType.bottomToTop,
              settings: settings,
            );;
        }
      },
    );
  }
}

Now you can simple use .pushNamedAll function on context to push multiple named routes at once. Make sure the length of the arguments list is equal to the routeNames length or don't pass arguments at all.

void pushNamedAll(){
  context
        .pushNamedAll(routeNames: ['/first', '/second'], arguments: [{}, {}]);
}

Page transition

Handle page transition animations easily with EasyPageTransition class.

For Eaxmple:

context.push(
  HomePage(),
  transitionType: EasyTransitionType.rightToLeft, // define the transition type/animation
);

Avaiable transition types:

• EasyTransitionType.topToBottom
• EasyTransitionType.bottomToTop
• EasyTransitionType.leftToRight
• EasyTransitionType.rightToLeft
• EasyTransitionType.scale
• EasyTransitionType.rotate
• EasyTransitionType.size
• EasyTransitionType.rightToLeftWithFade
• EasyTransitionType.leftToRightWithFade
• EasyTransitionType.leftToRightJoined
• EasyTransitionType.rightToLeftJoined

Easy Mixin

As soon as the statefull Widget implements easy mixin, it starts managaing the responsiveness of the app, then you don't need to manually initialize the EasyWidget for responsiveness.

Inspite of this, it gives you access to multiple functions and getters to make your code shorter, cleaner and easier.

Features	Description
screenW	returns screen width
screenH	returns screen height
orientation	returns screen orientation
kHeight	returns keyboard height
kVisible	check if keyboard is visible on the screen
pop()	pop function
back	pop getter
push, pushReplacement, pushAndRemoveUntil, pushNamed, pushReplacementNamed, popAndPushNamed	push functions
navigator	returns context navigator
theme	returns context theme
easySnackBar()	easy customizable snackbar
easyLoader	loader on the screen, can be used while future is getting executed
easyRestrictedLoader	Loader but it can't be closed with back button(Android, Web)
easyColorLoader()	Loader with more customization
easyDialog()	create dialog faster and cleaner
easyFuture< z>()	Handle futures, error and loading easily, explained in detailed below

easyFuture

Hanlde the future with and with clean code. With this you can:

• Handle the future with a callback
• Handle the error
• Default snackbars for error
• Handle the loading while executing future
• return type in case of error

Easy Extensions

Several extensions are available to make your code easier and cleaner.

Avaiable extensions works on:

• num
• BuildContext
• Object
• Widget
• String
• List
• List<String>
• List<num>