Skip to content
Branch: master
Find file History
brianegan General fixes
  - Improve Website look
  - Ensure widgets binding is initialized everywhere
  - Get firestore redux running
  - Fix redux web production build
Latest commit fe3b8da Jan 11, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
android Restore custom launcher icons Jan 11, 2020
ios Restore custom launcher icons Jan 11, 2020
test Apply pedantic analysis options to all examples and run it on CI Jan 7, 2020
test_driver Apply pedantic analysis options to all examples and run it on CI Jan 7, 2020
web fixing some bugs and cleaning up Jan 5, 2020
.gitignore first checkin with the mobx project and deps Jan 5, 2020
.metadata Update Mobx Sample: Jan 5, 2020 Fix README with latest changes Jan 7, 2020
package.json loading indicator, undo, showing a list Jan 5, 2020
pubspec.yaml Fix redux, rename/refactor repository and add tests Jan 11, 2020


TodoMVC built using MobX and Flutter

What is MobX?


MobX is a popular state management library for Dart and Flutter apps. It has also been recognized as a Flutter Favorite package.

MobX relies on 3 core concepts: Observables, Actions and Reactions. 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

Code Structure

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 mobx_codegen pub package) 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

To give a visible representation to the Store, we need the Observer widgets, part of the flutter_mobx pub package package.

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.

You can’t perform that action at this time.