How to use more than one ChangeNotifierProvider in Flutter?

牧云@^-^@ 提交于 2021-01-28 13:41:42

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!