flutter_mobx 0.3.4+2
flutter_mobx: ^0.3.4+2 copied to clipboard
Flutter integration for MobX. It provides a set of Observer widgets that automatically rebuild when the tracked observables change.
flutter_mobx #
![](https://github.com/mobxjs/mobx.dart/raw/master/docs/src/images/flutter-favorite.png)
Flutter integration with MobX.dart.
Provides the Observer
widget that listens to observables and automatically
rebuilds on changes.
Example #
class CounterExample extends StatefulWidget {
const CounterExample({Key key}) : super(key: key);
@override
_CounterExampleState createState() => _CounterExampleState();
}
class _CounterExampleState extends State<CounterExample> {
final _counter = Counter();
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('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: const TextStyle(fontSize: 20),
)),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _counter.increment,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
Notice the use of the Observer
widget that listens to _counter.value
, an observable, and rebuilds on changes.
You can go here for more examples
Observer #
Observer(Widget Function(BuildContext context) builder)
The builder
function will be monitored by MobX and tracks all
the observables that are being used inside it. When any of the
observables change, builder will be called again to rebuild the
Widget
. This gives you a seamless way to create a reactive Widget
.
Note that the Observer
will print a warning if no observables are discovered in the builder
function.