Flutter is a cross-platform mobile application development framework created by Google. Since its launch, is the most growing adoptive cross-platform SDK. We can write code in flutter for multi-platform users i.e. mobile(Android, iOS), web, desktop applications.
To learn more about Flutter check out its official doc.
Today we will talk about the state management approach in a flutter. From the official doc, we can learn Flutter does not offer any State Management technique for the developer except suggests to start with Provider. At first, we have to know what is state management.
State Management is nothing but a change in the UI state along with its data. When a user press on anything which needs to be changed then we should manage something which will notify the changes of the user.
Now there are lots of approaches i.e setState, Provider, bloc, redux, mobx, riverport, GetX, etc. It is very tough for a beginner to make decisions which one should learn and use. Many of us want to know which one is better or best. Well, there is no comparison with each other as a separate approach follows the separate logic itself.
In this article, I will go for the next approach. GetX is a powerful state management plugin that is developed by the flutter community. It is easy to install and use. It is very familiar to all the developers for its simplicity. Though it is simple it is powerful. GetX has three pillars which we learn from its documentation and these are State Management, Route Management, and Dependency Management.
I’m not going to elaborate on all of these things in this article. I will just let you start with a simple counter application that we generally saw when creating a Flutter project. Flutter generates this boilerplate for us. But this time we are going to create this counter application with the GetX
Let’s start.
At first, we need to install the GetX latest plugin which is compatible with our recent flutter and dart SDK version.
latest: get: ^4.3.8 add this get version in your pubspec.yaml.
Now create a file named controller (any name) under the lib folder. Within the controller file, we need to create create a class with a valid class name. I’m naming it as CounterController, now we extend the GetXController. This is where we will manage all the data which are part of the changeable data.
The counter instance is observable by using obs, with that we can notify the instance of any changes within the UI. As we demonstrate a counter using GetX, here we create a two-method name increment & decrement. Whenever the method will be called the counter value will be updated.
main. dart
In the main. dart we initialized the MyApp as a stateless widget and Also initiate the CounterController inside the build method. Using the put method the controller class will be initiate and created. Once the controller has initiate then we can use its object anywhere in our application just using the find method. follow the below snippet,
We are almost done with our counter application using Getx. Let’s see how to call the increment/decrement method and show the result value in our UI without writing more code just in a few.
See how simple it is. The marked area in the image is our counter instance which is changing whenever the user presses the button of increment/decrement
This is just a starting point of GetX, we can play as per our requirement using this nice state management plugin.
Hopefully, you enjoyed and are happy to be familiar with this.
Thank you.
Leave a Reply