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?

回答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.

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

来源：https://stackoverflow.com/questions/61123003/how-to-use-more-than-one-changenotifierprovider-in-flutter

标签

Flutter

dart

provider