How to use more than one ChangeNotifierProvider in Flutter? - flutter

Question

I recently started using provider for my state management and I know how to use one at a time.
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ChangeNotifierProvider<Reader>(
create: (context) => new Reader(),
child: _HomeBody(),
),
);
}
}
But now I have two different classes and I want to add both of them and be able to access in my widget tree.
How can I add more than one ChangeNotifierProvider in Flutter?

Answer 1

One option (not recommended) is to nest 2 Providers:
ChangeNotifierProvider<Reader>(
create: (_) => Reader(),
child: ChangeNotifierProvider<SomethingElse>(
create: (_) => SomethingElse(),
child: ChangeNotifierProvider<AnotherThing>(
create: (_) => AnotherThing(),
child: someWidget,
),
),
),
This is not recommended because, as the documentation states:
When injecting many values in big applications, Provider can rapidly become pretty nested:
But, another suggestion from the Provider package itself is to use the MultiProvider:
MultiProvider(
providers: [
ChangeNotifierProvider<Reader>(create: (_) => Reader()),
ChangeNotifierProvider<SomethingElse>(create: (_) => SomethingElse()),
ChangeNotifierProvider<AnotherThing>(create: (_) => AnotherThing()),
],
child: _HomeBody(),
)
Both approaches work the same but the second one is more readable. As the documentation words:
The behavior of both examples is strictly the same. MultiProvider only changes the appearance of the code.
Example adapted from the provider flutter package page and adapted to your case.

Answer 2

You could use MultiProvider
This guide helped me, hope it will help you too...
MultiProvider(
providers: [
ChangeNotifierProvider<Counter>(builder: (context) => Counter(0)),
ProxyProvider<Counter, ThemeSwitch>.custom(
builder: (context, counter, previous) {
final theme = previous ?? ThemeSwitch(ThemeState.light);
theme.themeState =
(counter.value > 5) ? ThemeState.dark : ThemeState.light;
return theme;
},
dispose: (context, value) => value.dispose(),
providerBuilder: (_, value, child) =>
ChangeNotifierProvider.value(notifier: value, child: child),
),
],
)