website·Indexed 30 days ago
https://mobx.netlify.appA reactive state management library for Dart and Flutter based on the triad of Observables, Actions, and Reactions. It provides tools like the Observer widget, ReactiveContext, and specialized observable types for Lists, Maps, and Streams to synchronize application state with the UI.
autorun, reaction, and when) act as consumers that respond to those changes. Reactivity is established automatically when an observable is read inside a reaction's tracking function; this links the reaction to the observable without manual wiring.Once code is formatted, versions are updated in pubspec.yaml and exposed via Melos, and the changelog is updated, push the changes to Git. GitHub Actions will automatically:
pub.dev if a newer version is detected.<package-name>-<version-number>.ObservableList tracks when items are added, removed, or modified and notifies observers. To ensure an Observer tracks mutations when passing the list to a child widget, call .toList() on the ObservableList. This converts it to a standard List for the child while maintaining the observation link in the parent.class Controller {
final ObservableList<String> observableList = ObservableList<String>();
}
// In the UI
Observer(builder: (_) {
return ChildWidget(
list: controller.observableList.toList(), // MobX detects mutations here
);
}),
class ChildWidget extends StatelessWidget {
final List<String> list; // Use standard List, not ObservableList, in child widgets
const ChildWidget({super.key, required this.list});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) => ListTile(title: Text(list[index])),
);
}
}ObservableStream<T> class in MobX wraps a standard Dart Stream<T> and makes it reactive. When the underlying stream emits a new value, any reaction (such as an Observer widget) that reads the .value property of the ObservableStream will automatically re-execute.// Inside a MobX Store
late final StreamController<int> _streamController;
late final ObservableStream<int?> randomStream;
void init() {
_streamController = StreamController<int>();
// Wrap the stream to make it reactive
randomStream = ObservableStream(_streamController.stream);
}provider package to create a repository of stores at the App level, avoiding singletons. Stores are initialized using MultiProvider and can be retrieved within a widget's build method using Provider.of<T>(context) or the Consumer<T> widget.// 1. Setup stores at the app level
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
Provider<MultiCounterStore>(create: (_) => MultiCounterStore())
],
child: MaterialApp(
home: ExampleList(),
),
);
}
}
// 2. Retrieve the store in a nested widget
class CounterListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final store = Provider.of<MultiCounterStore>(context);
return Observer(
builder: (_) => Column(children: <Widget>[
RaisedButton(
onPressed: store.addCounter,
child: const Text('Add Counter'),
),
]));
}
}ObservableFuture. This allows the UI to observe the status of the async call and provide visual feedback while the validation is in progress.abstract class _FormStore with Store {
// ...
@observable
ObservableFuture<bool> _usernameCheck = ObservableFuture.value(true);
@action
Future validateUsername(String value) async {
if (value == null || value.isEmpty) {
error.username = 'Cannot be blank';
return;
}
try {
// Wrap the future to track the status of the call
_usernameCheck = ObservableFuture(checkValidUsername(value));
error.username = null;
final isValid = await _usernameCheck;
if (!isValid) {
error.username = 'Username cannot be "admin"';
return;
}
} catch (_) {
error.username = null;
}
error.username = null;
}
}version field in the pubspec.yaml file following the semantic versioning policy. For example, when moving from version 0.1.0 to 0.2.0, update the field accordingly.version: 0.2.0Reactions are derivations that produce no output value and are used exclusively to trigger side-effects. Key implementation requirements include:
@action
Future<List<Repository>> fetchRepos() async {
repositories = [];
final future = client.repositories.listUserRepositories(user).toList();
fetchReposFuture = ObservableFuture(future);
return repositories = await future;
}flutter_mobx for the Observer widget, and mobx_codegen with build_runner to generate the necessary boilerplate code via annotations.dependencies:
mobx: ^2.6.1
flutter_mobx: ^2.3.0
dev_dependencies:
build_runner: ^2.16.1
mobx_codegen: ^2.7.8Observer widget. The Observer automatically tracks any observable values read within its builder function and triggers a re-render when those values change. This allows the use of StatelessWidget even for dynamic state.import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'counter.dart';
final counter = Counter(); // Instantiate the store
// Inside a Widget's build method:
Observer(
builder: (_) => Text(
'${counter.value}',
style: Theme.of(context).textTheme.headline4,
),
)