TodoMVC built using MobX and Flutter
What is MobX?
MobX relies on 3 core concepts:
Observables represent the reactive state of your application.
Actions are semantic operations that modify these observables and
Reactions are the listeners that "react" to the change in
Observables, by updating UI or firing network operations.
Reactions are considered as the side-effects in a MobX-based application.
You can learn more about these with the handy guides on mobx.pub.
The code has been split into the
TodoStore class (in
/stores) that manages the list of todos, the reactive
Todo model (in
/models), and the Flutter Widgets found in the root, or nested in folders if the screen is more complex (such as the home screen). MobX relies on code-generation (provided by ) to keep your store classes clean and simple. This means you have to run the
build_runner command to generate some code. The generated code is also checked in, so you don't have to do this by default. However, if you make any changes to the store classes, make sure to run:
flutter packages pub run build_runner build --delete-conflicting-outputs
Connecting stores to the UI
You will see that
Observers can be sprinkled freely inside your Flutter Widget tree. Use them just at the places where you need the UI to update based on changes in Store. In case of TodoMVC, you will see their usage inside the list-view (and each item), add/edit todo pages and detail page. The
Observer widget automatically listens to Observables that are references inside the provided
builder function -- freely use what you need and rebuilds are kept to a minimum for only those observed values.