Flutter with GetX
Hello folks 👋
Flutter is growing like no other language since these last months and it's amazing when we see such a positive reply from new and experienced devs. As it grows we will have new updates too. So I have come across this amazing state management “GetX” which is a pack of 3 :
1. State management
2. Navigation management
3. Dependencies management
So I have create a app which has 2 screens in it :
a. Product List
b. Product Details
PubDev Link: https://pub.dev/packages/get
I have used a Heroku app API which provides me a JSON of cosmetics products, and hey it's free 😍 you can use the URL mentioned below:
https://makeup-api.herokuapp.com/api/v1/products.json
Introduction
Let’s hit the basics in short I'm not gonna make it a headache 🤕 for you guys by making it lengthy.
Basically, there are 2 approaches to work with GetX
1. Classic
2. Reactive ← ❤️
We gonna deal with 3 kinda widgets when we use GetX :
a. GetX
b. ObX
c. GetBuilder
So now we don’t need stateful widgets 😎, GetX is saving our….
Working with GetX we can use MVC (Model, View, Controller) architecture, and it's kinda simple too. GetXController is an abstract class which we will be using with our controller class, GetXController will extend our user-defined class which will do the magic then.
Let me show you what I have build
As you can see we have a cosmetic shopping application ( I use none 😑 ) that includes Getx, Obx, GetBuilder. I also made a new UI considering colors as a high priority so the first picture with product tiles having colors is a horizontal ListView.
How to fetch data from API
So I have a controller here which is called as ProductController extends GetxController now we have the power of GetX so every GetxController has an override function called as onInit() “ you heard something like this before too 😋” so this function is called as soon as the extended class allocates its memory.
I wanted to call the API as soon as my widget appears over the screen so I am good here to use the onInit() function. As we have an onInit() we also have a dispose() which is called when class remains useless. Below is the code snippet of my controller which calls the api on onInit(). Source code is provided if you scroll deep down 👇
Changing States
Okay so how are we handing states here? 🤔
.obs , update() as 2 keywords and functions which are used to change the states so as we know we have reactive ( .obs )and classes, here reactive means it changes as soon as the assigned property changes its value but in the case of classic we need to use handle it manually ( update() ).
Below code is an easy example to explain the reactive approach:
So here as you can see we have Obx which is actually a stream that is connected to the controller and this approach is used when we have a controller initialized as you can see on line number 13 just because we already used/initialized it we don’t need to allocate it in the Widget Obx, but hey what if I didn’t allocate or initialize it? We will use GetX() widget, in that case 😎 , hey but how?? 👇
.obs keyword is assigned after the isCheck variable value which makes it listenable to the respective controllers whenever it changes the Obx and GetX widget assigned with that controller is rebuild automatically, so basically it's a put and sink formula like we have in streams in flutter itself. Also, I have not created any function to change the value of isCheck instead I do :
counterController.isCheck(!counterController.isCheck.value);
So this magic happens because of .obs keyword assigned to the variable is allows us to toggle the value of .obs property with the help of in-build functions given by getx isn’t that amazing 😄.
Okay, what about the classic approach 🤔 ….. 👇
Now in here there is no automatic / stream scenarios exist we need to update the state manually just like we use to do using setState() but here we have update(), now the question comes up :
Why should I use GetBuilder instead of Obx if I need to do things manually ?
As you can see in the code snippets we also use update([‘changeState’]) which is also optional as I have mentioned above but what if you have more than 2 states to be changed in a single screen but each one is not dependent on another, unnecessary both the widgets are rebuilt which is an indication of #BAD_CODING we don’t want that to happen obviously! so when we assign an id parameter to our GetBuilder widget with the value we need to identify it we can make it rebuild whenever our update([‘changeState’]) contains the parameter array of values containing the id of the GetBuilder, now the widget checks first, “Hey update is invoked but does it contain my id 🤔 ?” if yes “Let's rebuild 😏” if no “I won’t rebuild 😈”.
Give it a shot using the getX package mentioned above please.
Source Code, feel free to clone the repo and give it a try
Let’s connect via LinkedIn
Recent Medium stories
