State Management with MobX
In Flutter , there are many ways to manage state. We can achieve it with stateful widgets and setState method basically. When the application grows , using setState method is not so helpful. We can manage state like a boss and therefore we need to use state management libraries. In this article, I want to mention about one of state management library that is MobX.
What is MobX ?
MobX is a state-management library that makes it simple to connect the reactive data of your application with the UI.
MobX consist of three main concepts : Observables, Actions and Reactions.
Observables
The variables of store class whose state can be watchable. They can be simple scalars or complex object tree. We have to annotate the data with @observable. Also, there are computed observables such as getting square root of a value. For them, we have to annotate get function with @computed.
@observable
int number = 0;@computed
int get squareOfNumber => number * number ;
Actions
The methods of store class which are mutate observables. We have to annotate them with @action.
@observable
int number = 0;@action
void increment(){
number++;
}
Reactions
As you understand from its name, reactions are pieces that listen to observables and reacts to every change made on them.
To see changes in observable variables at UI, we need to use flutter_mobx library. That library has the Observer widget. We have to wrap our observable variable with Observer widget to see changes in that variable.
Necessary Libraries
- mobx is a library for reactively managing the state of your applications.
- flutter_mobx provides the Observer widget that listens to observables and automatically rebuilds on changes.
- mobx_codegen is code generator for MobX that adds support for annotating your code with @observable, @computed, @action and also creating Store classes.
- build_runner is package provides a concrete way of generating files using Dart code.
We need to add these libraries into pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
mobx: ^2.0.6+1
flutter_mobx: ^2.0.4dev_dependencies:
sdk: flutter
build_runner: ^2.1.8
mobx_codegen: ^2.0.5+2
After this, you need to run the command below to get libraries into your project.
flutter get pubSmall Example with MobX
Assume there is a game between two players. There are scores, names, pictures and countdown from fifteen seconds in the app bar. At the beginning the app bar background color is green. In the last 5 seconds, background color changes to red. So, the main criteria is countdown value. We have to observe that value. Let’s get our hands dirty for a small example.
First, we need a Store class that is “CountDown” in here. Then, there should be an observable variable for countdown. Variable named “remainSeconds” is the observable in class. The initial value is 15 and when the game screen is opened then timer goes down. For that reason, we need an action method that is named “decrement” in here.
flutter pub run build_runner buildWhen we run that command , “count_down.g.dart” file will be created automatically. It is not your concern.
In view part, we need to wrap app bar widget with Observer widget. Thus, view part can observe changes in the observable variable that is “remainSeconds”. According to value of “remainSeconds”, app bar’s background color and timer in the screen changes.
Demo
Let’s run the app, and ta-da..
References
Thank you for reading, it is my first medium article. I hope you liked it. See you guys!
