MobX State Management in Flutter: An Effective Library in Action

Welcome to this blog post about Flutter MobX. Before diving into the core concepts, it's important to understand that Flutter MobX is more than just another state management library. It's a transparent functional reactive programming (TFRP) library that seamlessly unifies and simplifies state management. With MobX, Flutter developers can focus purely on the 'how' of application state and behavior, and less on the 'when' of state updates and visual reactions, making it a very effective library for state management.

Getting Started with MobX in Flutter

To kickstart your journey with Flutter MobX, let's first set up a new Flutter project. Download and install Dart and Flutter SDKs on your machine first. Then, proceed to create a new Flutter project using the command line or your favorite IDE.

Copy
1
2
     flutter create mobx_example
     

After creating the project, update the pubspec.yaml file in the project's root directory to include MobX and Flutter MobX dependencies.

Copy
1
2
3
4
5
6
     dependencies:
      flutter:
        sdk: flutter
      mobx: ^2.2.0
      flutter_mobx: ^2.1.0
     

Remember to fetch the dependencies by running flutter packages get in the terminal.

Flutter MobX Core Concepts

To get a grip on this state management library, the core concepts we need to understand are Observables, Actions, Computeds, and Reactions.

Observables

These entities represent the reactive state in our application. Observables change and trigger reactions when they do. They help us maintain our core state.

Actions

Actions are methods in our MobX store that modify the state. They cause changes in the observable state and trigger reactions. For instance, we could have an increment action for a simple counter.

Computeds

These represent derived state in our applications. They are functions that automatically update when underlying observables change. Computed values are like the 'getter' methods for reactive data in our MobX store.

Reactions

Most visual reactions to observables will be handled by the Observer widget, a granular observer that reacts to relevant observable changes and re-builds to deliver UI updates.

Here's a peek into how to define the core state in a Dart file:

Copy
1
2
3
4
5
6
7
8
9
10
     abstract class CounterBase with Store {
        @observable
        int value = 0;
    
        @action
        void increment() {
            value++;
        }
    }
     

In this abstract class CounterBase, we have a simple reactive counter. value is an Observable and increment() is an Action.

Understanding Flutter MobX

The Observer widget in MobX, which is a part of the build method, ensures that whenever any observable it’s tracking observables values changes, it triggers a new build. It's a reaction to changes in the state.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
     class CounterExample extends StatelessWidget {
      const CounterExample({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('MobX Counter'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Observer(
                    builder: (_) => Text(
                          '${counter.value}',
                          style: Theme.of(context).textTheme.headline4,
                        )),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: counter.increment,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        );
      }
    }
     

In the CounterExample StatelessWidget class, we have our Observer wrapped around a text widget, which displays the value of our counter. The builder function produces a widget tree. The Observer detects when observables referenced within its build function change and re-renders the widget tree.

Implementing Flutter MobX Example

Let’s illustrate how to use Flutter MobX with a simple counter example. We’ll start by creating a new file named counter.dart in the lib folder.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     import 'package:mobx/mobx.dart';
    
    part 'counter.g.dart';
    
    class Counter = CounterBase with _$Counter;
    
    abstract class CounterBase with Store {
      @observable
      int value = 0;
    
      @action
      void increment() {
        value++;
      }
    }
     

In the above code, CounterBase is an abstract class that we're augmenting with _$Counter to get a concrete class.

To generate the necessary MobX code, you'll need to run the build_runner command in the terminal:

Copy
1
2
     flutter packages pub run build_runner build
     

Then, instantiate the Counter class in the main.dart file.

Copy
1
2
3
4
5
     void main() {
      final counter = Counter();
      runApp(MyApp(counter: counter));
    }
     

Within the application, the counter can be accessed via the widget's build BuildContext context and used to update the user interface. The Observer widget automatically tracks observables and rebuilds upon changes. Below is a practical counter example to illustrate the concept:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
     class MyApp extends StatelessWidget {
      const MyApp({Key? key, required this.counter}) : super(key: key);
    
      final Counter counter;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(counter: counter),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      const MyHomePage({
        Key? key,
        required this.counter,
      }) : super(key: key);
    
      final Counter counter;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('MobX Counter'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Observer(
                    builder: (_) => Text(
                          '${counter.value}',
                          style: Theme.of(context).textTheme.headline4,
                        )),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: counter.increment,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        );
      }
    }
     

Here, we use the Observer widget in the widget build(BuildContext context) function, tracking the value Observable, and we ensure the widget rebuilds every time the value changes.

Flutter MobX Observer

In MobX, Observers are an incredibly powerful feature. They allow components to automatically re-render upon changes in the state they depend on, even if only a small part of the state has changed. This makes state management not just simple but also efficient. Let's see how the Observer widget fits into our counter example:

Copy
1
2
3
4
5
6
7
     Observer(
      builder: (_) => Text(
        '${counter.value}',
        style: Theme.of(context).textTheme.headline4,
      ),
    ),
     

Here, we have wrapped the Text widget with an Observer. Every time our Observable counter.value changes, the Observer ensures that the anonymous function in its builder (our builder function) is called, thus reflecting the change on the UI.

Dealing with complex states

How does MobX deal with complex states? MobX shines when it comes to managing large and complex state trees. Its philosophy of Transparent Functional Reactive Programming (TFRP) guarantees computeds, reactions, and observers derived from tracking the state are automatically kept consistent.

Consider a contact management application. Each contact entity could be represented as a MobX Store with different observables for the contact's attributes. Combining firstname and lastname form an Observable for the contact's full name, for instance.

Copy
1
2
3
4
5
6
7
8
9
10
11
     abstract class ContactBase with Store {
      @observable
      String firstname = '';
    
      @observable
      String lastname = '';
    
      @computed
      String get fullName => '$firstname $lastname';
    }
     

Here, fullName is a computed Observable that automatically updates when either firstname or lastname changes.

Testing MobX managed states in Flutter

We can test MobX managed states effectively, similar to how we can test other derived states in our Flutter project. Let's take a look at an example of testing our counter increment action.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     void main() {
      group('Counter Store Test', () {
        late Counter counter;
        setUp(() {
          counter = Counter();
        });
    
        test('Initial Counter Value Test', () {
          expect(counter.value, 0);
        });
    
        test('Counter Increment Test', () {
          counter.increment();
          expect(counter.value, 1);
        });
      });
    }
     

In the above code, we instantiated our Counter store and tested for the initial value. We also tested the increment function, validating the updated counter value.

Tips for better Flutter MobX utilization

While working with MobX, using actions for every task that modifies the state is a good practice. It ensures consistency and order in state changes, making the app more predictable and easier to debug. A common mistake to avoid is updating observables directly outside of actions. This bypasses action handling and might lead to inconsistency in state updates.

Start Flourishing with Flutter MobX

MobX simplifies state management, elegantly unifies state and UI, and most importantly, enhances productivity. The best way to truly appreciate and effectively use this library is through experience. Develop more using Flutter MobX, experiment with different use cases, and evolve your grasp of reactive programming paradigms.

With MobX, you are only ever a few steps away from crafting stunning Flutter apps with immaculate state management! Here's to a fruitful Flutter MobX experience!

Reference & Additional Resources

1. Official MobX.dart Repository
2. Flutter MobX Documentation
3. Flutter MobX Package

The Dart language aims to be clear and concise, not just for the machine, but also for the developer: "Do not make the machine's problem, the developer's problem". Such a principle aligns perfectly with the ethos of MobX.

Remember, the strength of MobX lies in its simplicity and ease of use. With this newfound knowledge, I'm confident that you'll be able to utilize this tool to efficiently manage the state in your Flutter applications! Happy flutteringgg! 💙