MobX in Flutter

MobX in Flutter is a library used for the state management of applications.

There are various other approaches for state management in Flutter Applications such as –

Inherited Widget
Scoped Model
Provider
Redux
Bloc
GetIt
GetX…. and many more…

MobX is based on three important concepts –

Observables
Actions
Reactions

Now, we will be discussing these core concepts in brief.

Observables

Whenever there will be a change in data then the notification will be fired for the particular observer.

Observables can be simple as well as complex.

Actions

Actions help in mutating the observables.

They make sure that all the changes will be notified once they have completed

Reactions

Reactions are the ones which gets notified when the observable they track gets changed.

The most important feature of Reactions is they automatically track all the observables without any external work.

Here, we will be discussing the working and implementation of MobX in Flutter.

In order to integrate MobX in Flutter App, we have to follow some steps-

Step – 1 -> Add mobx: ^2.0.5 and flutter_mobx: ^2.0.2 dependency in the pubspec.yaml file.

mobx: ^2.0.5
flutter_mobx: ^2.0.2

1 2	mobx: ^2.0.5 flutter_mobx: ^2.0.2

Step – 2 -> Now add these dependecies under dev_dependencies in the pubspec.yaml file

build_runner: ^2.1.5
mobx_codegen: ^2.0.4

1 2	build_runner: ^2.1.5 mobx_codegen: ^2.0.4

Step – 3 -> After adding all the dependencies, run “pub get” command.

Now all the packages have been added to our project.

After that we will have to create the UI for the interaction with Observables.

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobxdemo/counter_update.dart';

class CounterUI extends StatelessWidget {
  final count = CounterUpdate();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Working with MobX in Flutter"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
            ElevatedButton(onPressed: () {count.incrementFunc();}, child: const Icon(Icons.add)),
            Observer(builder: (_) => Text("${count.counter}")),
            ElevatedButton(onPressed: () {count.decrementFunc();}, child: const Icon(Icons.remove)),
          ],),
        ],
      ),
    );  }
}

import 'package:flutter/material.dart';

import 'package:flutter_mobx/flutter_mobx.dart';

import 'package:mobxdemo/counter_update.dart';

class CounterUI extends StatelessWidget {

final count = CounterUpdate();

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Working with MobX in Flutter"),

body: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Row(

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: [

ElevatedButton(onPressed: () {count.incrementFunc();}, child: const Icon(Icons.add)),

Observer(builder: (_) => Text("${count.counter}")),

ElevatedButton(onPressed: () {count.decrementFunc();}, child: const Icon(Icons.remove)),

],),

); }

}

Once we have creatd the UI, now we will ned to create the observables and the corresponding actions in another class.

import 'package:mobx/mobx.dart';
part 'counter_update.g.dart';

class CounterUpdate =  _CounterUpdate with _$CounterUpdate;

abstract class _CounterUpdate with Store{
  @observable
  int counter = 0;

  @action
  void incrementFunc(){
    counter++;
  }

  @action
  void decrementFunc(){
    counter--;
  }
}

import 'package:mobx/mobx.dart';

part 'counter_update.g.dart';

class CounterUpdate = _CounterUpdate with _$CounterUpdate;

abstract class _CounterUpdate with Store{

@observable

int counter = 0;

@action

void incrementFunc(){

counter++;

}

@action

void decrementFunc(){

counter--;

}

In this code, here we have written prt. ‘counter-update.g.dart’, this file can be generated with the help of command.

flutter packages pub run build_runner build

1	flutter packages pub run build_runner build

Once his command gets run successfully , the file will be generated and console will look like –

Here, we have successfully implemented MobX in our application.

Conclusion

In this blog, we have discussed how to manage the state of applications with the help of MobX Library.

I hope it will help you out in understanding and getting a brief idea about it.

Thank you for reading!!

References

https://pub.dev/packages/mobx

https://mobx.netlify.app/getting-started/

Tanya Goel 30 November 2021

. . .

MobX in Flutter

Observables

Actions

Reactions

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!