easy_widgets

Description:

easy widgets

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
copied to clipboard
or
dependencies:
easy_widgets: ^0.0.4
copied to clipboard
Import #
All you need is a single import:
import 'package:easy_widget/easy_widget.dart';
copied to clipboard
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);
copied to clipboard
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
.
*/
);
}
copied to clipboard

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
copied to clipboard
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
.
*/
}
copied to clipboard
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();
}
copied to clipboard

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,
);
copied to clipboard
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,
),
);
copied to clipboard

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
);
}
copied to clipboard
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,
);;
}
},
);
}
}
copied to clipboard
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: [{}, {}]);
}
copied to clipboard

Page transition #
Handle page transition animations easily with EasyPageTransition class.
For Eaxmple:
context.push(
HomePage(),
transitionType: EasyTransitionType.rightToLeft, // define the transition type/animation
);
copied to clipboard
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>