How to use more than one ChangeNotifierProvider in Flutter?

user_12718080 0
Viewed 6470

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?

dart flutter provider
2 Answers

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.

user_107469780

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),
    ),
  ],
)
user_94186520
Related