Flutter provider package is a simple state management solution. There are few essential provider classes you need to know: Provider
, FutureProvider
, ChangeNotifierProvider
, ProxyProvider
. Here I record some basic usages for provide 5
Provider let you inject a dependency for its decendents.
Provider(
create: (ctx) => ChickenSoap(),
child: Container(
child: Center(
child: Consumer<ChickenSoap>(builder: (ctx, c, child) {
return Text('The chicken soap is ${c.taste}');
})
),
),
),
class ChickenSoap {
String taste = 'yummy';
}
Consumer get ChickenSoap from its ancestors
While this works, consumer class does not rebuild depending on ChickenSoap's state
FutureProvider rebuild its watcher when its resolved
FutureProvider(
create: (ctx) => Future.delayed(Duration(seconds: 5)).then((v) {
return ChickenSoap();
}),
child: Container(
child: Center(
child: Consumer<ChickenSoap>(builder: (ctx, c, child) {
if (c == null) return Container();
return Text('The chicken soap is ${c.taste}');
})
),
),
)
Consumer will build its content twice.
First time with null, second time with the completed future.
FutureBuilder
in flutter also build its widget depending on future completion. However, it rebuild all it's subtree.
There's also a StreamProvider
that rebuild its watchers when new content is pushed to the stream.
ChangeNotifierProvider rebuild its watcher when notifyListeners method is called
ProxyProvider combine multiple provider into one
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => Counter()),
ProxyProvider<Counter, StringCounter>(
update: (ctx, counter, oldStringCounter) {
return StringCounter(counter.value);
},
),
],
child: Container(
child: Center(
child: Consumer<StringCounter>(builder: (context, c, child) {
return RaisedButton(
child: Text(c.toString()),
onPressed: () {
var counter = Provider.of<Counter>(context, listen: false);
counter.inc();
},
);
})
),
),
);
class Counter extends ChangeNotifier {
int value = 0;
inc() {
value += 1;
notifyListeners();
}
}
class StringCounter {
StringCounter(this.value);
final int value;
String toString() {
return 'You clicked this $value times';
}
}