MobX is a state management library that makes it easy to connect application response data to the UI. The wiring is completely automatic and feels natural. As an application developer, you focus entirely on the reaction data you need to use in the UI (and elsewhere) and don’t have to worry about keeping the two in sync.

Anything derived from the application state should be acquired automatically. (This includes UI, data serialization, server communication, and so on)

Three important Mobx concepts

  • Observables: represents a responsive state, also known as an observable. State refers to the state or data in an application. Responsiveness is the perceived, observable change in data, which is the observer pattern that we are often exposed to.
  • Actions: Actions are a series of Actions that cause a change in state.
  • Reactions: State observers who receive notifications of data changes when the state changes.

InStalling

Add with Dart:

dart pub add mobx
Copy the code

With flutter add

flutter pub add mobx
Copy the code

** Note: ** Build_Runner and mobx_codeGen need to be added in addition to Mobx

flutter pub add build_runner
flutter pub add mobx_codegen
Copy the code

start

Create a new couter with a single value in it and add two methods to change that value

import 'package:mobx/mobx.dart';

Dart is the current counter. Dart file with the g mapping file
part 'counter.g.dart';

class Counter = _Counter with _$Counter; // Add that the current state can be shared by multiple interfacesfinal Counter counter = Counter(a); //MARK: Note that the older version usesimplements, the new version needs to be changed towith

abstract class _Counter with Store {
  @observable
  int value = 10;

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

  @action
  voiddecrement() { value--; }}Copy the code

At this time

part 'counter.g.dart';

class Counter = _Counter with _$Counter;
Copy the code

It’ll turn red. That’s okay. We also need a third party to generate files for us through build_runner and execute them in the project root directory

flutter packages pub run build_runner build
Copy the code

The file counter. G.art will be automatically generated (note: you need to write the above 2 lines of code, and execute build_runner to generate the file)

If you want it to run in the background while you make changes, use:

flutter packages pub run build_runner watch
Copy the code

Add an Observer

Observer({Key? key, required this.builder, String? name})
      : debugConstructingStackFrame = debugFindConstructingStackFrame(),
        super(key: key, name: name);
// Builder is a WidgetBuilder
Copy the code

So put on a layer of observers where you need them

Observer(builder: (_) => Text(
                      "${counter.value}"
                    )),
Copy the code

How do we change the value to change the UI after we add the observer (via action)

You can change Counter values by calling the Counter’s Increment and Decrement actions

TextButton.icon(onPressed: counter.decrement,
                     icon: const Icon(Icons.remove),
                     label: const Text('cut'))

TextButton.icon(onPressed: counter.increment,
                     icon: const Icon(Icons.add),
                    label: const Text('and')),
Copy the code

Or you can change the value directly

TextButton(onPressed: () => {counter.value += 2},
               child:const Text('Change the value of counter directly', 
	       style:TextStyle(fontSize: 30.0)))Copy the code

The demo address

Github.com/weisionXu/f…