Let’s GetX in Flutter

In this article, we will be looking at GetX and it’ s principles, features and how to use it in our flutter applications.

Photo by Anthony Duran on Unsplash

Introduction

GetX is a fast, lightweight and powerful micro framework and using this, we can easily manage states, routing and can perform dependency injection in an efficient way.

Flutter is fast moving framework in itself, a lot of things updated in it and it’s plugins and as a developers we need to keep our apps up to date with latests dependencies in pubspec.dart file for various things, instead of many such dependencies we can use GetX, it’s all in one package and it provides lot of things right, which in turn allows us to prevent the dependency nightmares we often face in application development.

If we use GetX then we can avoid usage of the StatefulWidgets, it can surely reduce some RAM consumption, no need to messed with initState() and others such methods, instead we have more clear way to do it. We have controllers which have it’s own lifecycle and can separate business logic from view, whenever any change occurs using controller it will automatically updated the view.

GetX have 3 Basic Principles. let’s look at them,

• Performance : GetX mainly focuses on better performance and minimum usage of resources, so in my humble opinion it’s best among others state management techniques.
• Productivity : GetX have easy to remember syntax beside it’s top notch performance. It saves a lot of time of the developers and increases the speed of the app by reducing the usage of resources.
• Organization : GetX allows us to do away with business logics on views and separate dependency injection and navigation from the UI. You don’t require the context to navigating between screens. You do not need to inject your Controllers/Models/Blocs classes into your widget tree through multiproviders, for this GetX uses its own dependency injection feature.

Installation : Use this package as a library

Add Get to your package’s pubspec.yaml file:

Import it in file that it will be used:

Features of GetX

State Management

There are so many State Management libraries available in flutter like BLoC, Provider, MobX etc. GetX it self gives us two options for state management.

• Simple state manager (known as GetBuilder).
• Reactive state manager (known as GetX/Obx).

Simple State Management : GetX has the GetBuilder which is used to make UI Screens or views interact with the variables and methods on the controllers. From here, we can call functions and listen to the changes in states. So, let’s create a controller first.

We use update() method so that our widgets in UI can listen to those changes we did in method of our controller. now to listen changes we have to wrap our widget with a GetBuilder.

We have to initialize our controller only the first time and the second time we use ReBuilder for the same controller, do not initialize it again.

No need to use StatefulWidget with GetX because GetBuilder replaces the StatefulWidget and we can keep all the widgets Stateless and wrap the specific widgets as per our requirement with GetBuilder.

Reactive State Management : GetBuilder is not reactive means we’ll not able to use streams for this we have to use GetX class. syntax of GetX is very similar to GetBuilder but the approach is based on flutter’s stream. GetX have all the required Reactive Programming features we don’t need to use StreamControllers, StreamBuilders for each variable and class for each state, even we do not need to use any auto generated classes by code generators. Let’s see how to use it,

We have to add .obs to any variable to make it observable. Basically we’re using counter as a stream of int type.

We can listen to the changes of counter from our view using power of GetX. like this,

We can use the Obx widget instead of GetX which gives us anonymous function that creates a widget for us and to use our variables and methods from our view we need to initialize the Controller first like this,

Route Management

If we want to use widgets like Snackbar, Bottomsheets, dialogs, etc. Then we can use GetX for it because it can build these widgets without using context and it’s provide API for navigating within the Flutter application with simple and less code needed.

Here is how we can use GetX for Navigating to a screen…

To navigate to the new screen we can use it like this,

To navigate to the new screen using name we can use it like this,

To close snackbars, dialogs, bottomsheets, or anything you would normally close with Navigator.pop(context); we can use it like this,

To navigate to the next screen and don’t want to go back to the previous screen (for use in SplashScreens, login screens and etc.) we can use it like this,

To navigate to the next screen and cancel all previous routes (useful in shopping carts apps , polls, and tests) we can use it like this,

Dependency Management

GetX has a simple and powerful dependency manager for our flutter application using which we can access Bloc or Controller using class name in one line of code.

Get.put() is the most common way of inserting a dependency it loads immediately and can be used directly. we can use it like this,

Get.lazyPut() to lazily load a dependency so that it will be instantiated only when is used. we can use it like this,

Get.lazyPut() loads the dependencies only once, means that if we removed and created the route again, it will not load dependencies again so, to overcome this default behaviour we have to use fenix property.

dependencies re-initialize again when the route is back in navigation stack.

Get.putAsync() used when we want to register an asynchronous instance. we can use it like this,

When we need to maintain that instance alive in our entire app we can set true to optional permanent property.

Get.create() used when we have to create a new instance of the dependency every time. we can use it like this,

Internationalization

Internationalization is an activity that developer, perform by utilizing system provided APIs to make app as good in Arabic or Chinese as it is in English.

GetX provides facility of translation as a simple key-value dictionary map. to create our own custom class we have to extend our calss with Translations Class. we can use it like this,

to use it we have to just append .tr to the specified key and it will be translated, using the current value of Get.locale and Get.fallbackLocale passed in parameters of GetMaterialApp.

Change Theme

While we are using GetX we don’t need to use any higher level widget than “GetMaterialApp” widget and also we don’t need to use “ThemeProvider” widget for changing theme.

Switching the Theme from light to dark or dark to light we can use something like this,

When Get.isDarkMode is activated, it will switched to light theme and vice versa.

That’s it!

That’s it for this time guys, stay with us for such more informative stuff. I hope this article adds value to your experience with GetX in Flutter.
Thanks for Reading!! 🙂