Watchers
Watchers are the fundamental part for interacting with Flutter when a part of your state changes.
If you just want to watch the state in a widget you can use the WatcherBuilder
widget:
WatcherBuilder( builder: (context, store) { // Just use the watch method of the store to get the value of counter // and rebuild when it changes. final counter = store.watch(refCounter); return Text('$counter'); },);
If you prefer to have dedicated stateless or stateful widgets with a built-in support of stores, you can extend from WatcherStatelessWidget
or WatcherStatefulWidget
:
class _Counter_ extends WatcherStatelessWidget { const _Counter_();
@override Widget build(BuildContext context, BuildStore store) { final counter = store.watch(refCounter); return Text('$counter'); }}
For the WatcherStatefulWidget
, the store is a property of the state:
class _Counter_ extends WatcherStatefulWidget { const _Counter_({});
@override State<_Counter_> createState() => _CounterState();}
class _CounterState extends State<_Counter_> { @override Widget build(BuildContext context) { final counter = store.watch(refCounter); return Text('$counter'); }}
If you want to update the value of a state, you need to do it in a Watcher, but not during the build phase:
class _IncrementButton extends WatcherStatelessWidget { const _IncrementButton();
@override Widget build(BuildContext context, BuildStore store) { return FloatingActionButton( tooltip: 'Increment', onPressed: () { store.update(refCounter, (x) => x + 1); }, child: const Icon(Icons.add), ); }}
Sometimes we don’t want to rebuild the UI but we want to execute some code when a state changes.
In this case we can use the WatcherEffect
widget:
return WatcherEffect( ref: refCounter, onStateChanged: (context, oldValue, newValue) { // Do whatever you want when the value changes. },);
We will see how to separate the business logic from the UI in the next chapter.