Getx

Transcript

1. GetX - a swiss knife for flutter
2. Topics To Be Covered •Why Getx •About Getx •State Management • Navigation with Getx • Alerts •API calls using Getx •Getx vs Bloc & mobx •Internationalization •Theme •Utils • Getx Widget • Cons
3. WHY GETX • As compared to Bloc and mobx, getx is easy to learn • Getx has very short syntax • With getx we don't need stateful widget • Not only state management getx also comes with navigation, Internationalization, theming support and Api call support • It's a mini framework inside a framework
4. ABOUT GETX • GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically. • Most Liked Package Data Types • RxInt, RxString, RxBool, RxDouble, RxMap, RxList and RxSet • Nullable types -: RxnInt, RxnBool etc.
5. STATE MANAGEMENT Creating observable • To create an observable, we just add '.obs' at the end. • For example -:
6. STATE MANAGEMENT Lifecycle • In GetX, we have Getxcontroller • It extends DisposableInterface. • GetxController comes with onInit() and onClose() methods which essentially replace the initState() and dispose() methods of the StatefulWidget. • GetxController also comes with onReady() which is called after the widget is rendered on screen OnInit() OnReady() OnClose()
7. STATE MANAGEMENT Declaring Dependency • Get.put() -: Get.put makes the dependency available to all the child routes. • Get.find() -: So, in case we need to access the same instance in some other class, we can do that using Get.find. • Get.create() -: This one creates a new instance of the dependency every time Get.find is called. • Get.lazyPut() -: it lazy loads the dependencies, which basically means that the dependencies will be created immediately but will be loaded to memory only when Get.find is called for the first time. • Get.asyncPut() -: When using SharedPreferences or async function, we need to work with dependencies asynchronously.
8. STATE MANAGEMENT GetBuilder • Not reactive • It can be used whenever we use setState() • Just like notifyListener() we use update()
9. STATE MANAGEMENT GetX • reactive • Only will redraws the widget when value is actually changed • for example -: 5 -> 5, then widgets will not be redrawn
10. STATE MANAGEMENT Obx • reactive • If you’ll be using with multiple controllers in the same widget. Obx doesn't need a type, so it can be used with any number of controllers.
11. STATE MANAGEMENT MixinBuilder • It’s the heaviest of all other approaches, so will affect the performance in larger apps. • It has a very specific and rare use case, which we may never come across. • Obx < GetX < GetBuilder < MixinBuilder
12. STATE MANAGEMENT Bindings • Bindings are classes where we can declare our dependencies and then ‘bind’ them to the routes. • We have initial binding we can add binding in the main too.
13. STATE MANAGEMENT Smart Memory Management • Getx provides smart management so we can configure how dependency in term of memory management (1) SmartManagement.full • It disposes classes that are not being used and are not perment (2) SmartManagement.onlyBuilder • Only controller started with init or loaded into bind with 'lazyput' will be disposed (3) SmartManagement.keepFactory • Same as full but it will recreate dependency when needed
14. GETX VS BLOC & MOBX • Getx have reduced boilerplate • doesn't have to be dependent on code generation • Getx has its own dependency injection manager • Bloc 2 dependency, Mobx 4 dependency but with getx only 1 • With getx the state is independent from the widget tree
15. NAVIGATION WITH GETX • We can navigate without context • First, we need GetMaterialApp() Syntax • Get.to(NextScreen()); • Get.toNamed('/details'); • Get.back(); • Get.off(NextScreen()); //To go to the next screen and no option to go back to the previous screen • Get.offAll(NextScreen()); //To go to the next screen and cancel all previous routes • Get.offUntil();// same as pushAndRemoveUntil • Get.offNamedUntil()// same for named routes
16. ALERTDIALOG AND SNACKBAR • Getx also provides alertDialogs, bottombars and snackbars without context • Syntax-:
17. API CALLS • We can simply extend GetConnect and use the GET/POST/PUT/DELETE/SOCKET methods to communicate with Rest API or websockets • We can also use it for graphQL responses
18. API CALLS Retrofit vs Getx • Retrofit has code generation and while getx doen't
19. INTERNATIONALIZATION • GetX also support Language Localization • We extends Translations class and define key-value pairs in map
20. THEME • We give ThemeData in the GetMaterialApp as we provide normally and change it using just changeThemeMode function.
21. UTILS • These are small functions which we can use to determine certain things. • For example-:
22. GETVIEW AND GETWIDGET • GetView is a stateless widget that has a controller getter, simple as that. If we have a single controller as a dependency, we can use GetView instead of StatelessWidget and avoid writing Get.find. • GetWidget is very similar to GetView with one tiny difference — it gives us the same instance of Get.find every time. This becomes surprisingly useful when used in combination with Get.create, as we can have multiple widgets interact with the same instance of a dependency.
23. CONS I FOUND • Not well documented • Can feel bloated bloated
24. Thank You