CODEWITHSUNDEEP
flutterdartprovider
kamranbekirovyz
kamranbekirovyz

Reputation: 1331

How to use more than one ChangeNotifierProvider in Flutter?

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?

Upvotes: 7

Views: 10423

Answers (2)

Naslausky
Naslausky

Reputation: 3768

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.

Upvotes: 15

LUIGI SAVINO
LUIGI SAVINO

Reputation: 31

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

Upvotes: 3

Related Questions