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.

    sdk: flutter

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

    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() {

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

class _MyAppState extends State<MyApp> {

  final Counter counter = Counter();

  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{

  int count = 0;

  void increment(){



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.



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');

  int get count {
    return super.count;

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

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

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

  String toString() {
    return '''
count: ${count}


flutter mobx Output :

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

flutter mobx

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.


Show Buttons
Hide Buttons
Read previous post:
Flutter multiprovider tutorial for beginners

  Flutter Multiprovider : Flutter Multiprovider class let's you have multiple providers declared in your flutter app. In our previous...