Flutter Mobx Reactive State Management Tutorial

Flutter Mobx :

Flutter mobx reactive state management library is clearly explained in this blog with a real time example so that you can easily understand.

Mobx state management library will make it easier for you to handle reactive data through out your app and populate it to the UI.

We will go through the concept of mobx where we will see observable’s, reactions and actions how the data moves using these components.

Using the flutter mobx library we can concentrate on the logic rather than code implementation i.e., how to handle the data.

You can go through the below tutorial for more implementation level guidance on flutter mobx and detailed explanation of this concept using a real time example.

Flutter mobx video tutorial :

Watch the complete tutorial below for more information.

Dependencies :

Add the dependencies mobx, flutter_mobx and provider to your pubspec file and provide the appropriate version to avoid the unwanted app level crashes.

Dev dependencies build_runner and mobx_codegen are used to work with the coding purpose and they are different from dependencies which roll out with the app.

dependencies:
  flutter:
    sdk: flutter

  mobx: ^2.0.1
  flutter_mobx: ^2.0.0
  provider: ^5.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^2.0.3
  mobx_codegen: ^2.0.1+3

main.dart :

In this example we are providing a counter example to explain flutter mobx concept.Using a floating action button we can increment the count and consume the same value.

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_mobx_tutorial/counter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final Counter counter = Counter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("mobx counter"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("You have pushed the button "),
              Observer(builder: (_){
                return Text('${counter.count}');
              })
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: counter.increment,
          child: const Icon(Icons.add)
        ),
      ),
    );
  }
}

counter.dart :

In this class file we can specify the observable variable and action to be performed on it.And using this file we can generate the counter.g.dart file using build_runner.

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = _Counter with _$Counter;

abstract class _Counter with Store{

  @observable
  int count = 0;

  @action
  void increment(){
    count++;
  }

}

Now generate the below file by moving into terminal and run the below command

flutter packages pub run build_runner watch

counter.g.dart :

We will generate the below file using build_runner dependency which we have added in the pubspec file under dev_dependency.

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'counter.dart';

// **************************************************************************
// StoreGenerator
// **************************************************************************

// ignore_for_file: non_constant_identifier_names, unnecessary_brace_in_string_interps, unnecessary_lambdas, prefer_expression_function_bodies, lines_longer_than_80_chars, avoid_as, avoid_annotating_with_dynamic

mixin _$Counter on _Counter, Store {
  final _$countAtom = Atom(name: '_Counter.count');

  @override
  int get count {
    _$countAtom.reportRead();
    return super.count;
  }

  @override
  set count(int value) {
    _$countAtom.reportWrite(value, super.count, () {
      super.count = value;
    });
  }

  final _$_CounterActionController = ActionController(name: '_Counter');

  @override
  void increment() {
    final _$actionInfo =
        _$_CounterActionController.startAction(name: '_Counter.increment');
    try {
      return super.increment();
    } finally {
      _$_CounterActionController.endAction(_$actionInfo);
    }
  }

  @override
  String toString() {
    return '''
count: ${count}
    ''';
  }
}

flutter mobx Output :

This screen depicts the usage of flutter mobx implementation in your app.

If you have any queries in this tutorial on flutter mobx do let us know in the comment section below.If you like this tutorial do like and share for more interesting content.