一个小部件中的两个提供程序-Flutter

问题描述

我有这个问题。在我的应用程序中,我使用Provider package来管理登录状态。在MaterialApp中,我还想管理某种用户配置,在本例中是主题选择。

如果我尝试使用两次Provider.of<LoginService>(context),则会收到此错误

 Could not find the correct Provider<LoginService> above this MyApp Widget

This likely happens because you used a `BuildContext` that does not include the provider
of your choice.

如何一次在Provider中使用Provider.of...甚至在小部件中甚至两个不同的Provider中使用(例如,将我的LoginService和我的UserconfigService分开)?

谢谢!

实际代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<LoginService>(
        create: (context) => LoginService(),child:  MaterialApp(
          title: 'My App',debugShowCheckedModeBanner: false,theme: ThemeData.dark(),routes: {
            '/': (BuildContext context) {
              var state = Provider.of<LoginService>(context);
              if (state.isLoggedIn()) {
                return HomeScreen();
              } else {
                return LoginScreen();
              }
            },MentorScreen.id: (BuildContext context) => MentorScreen(),},)
    );

  }

我的目标:

child:  MaterialApp(
          title: 'MyApp',theme: state.isDarkThemeEnabled() == true ? ThemeData.dark() : ThemeData.light(),...

解决方法

您可以使用MultiProvider代替ChangeNotifierProvider。 在here中了解更多信息。

,

在创建context类之后立即使用ChangeNotifierProvider时,会出现这种类型的错误。

类似地,如果您使用context中的Scaffold来showDialog,则会出现类似的错误。 Here is the answer that explains why this happens

对于此Wrap,您的MaterialApp类中的Builder小部件将首先等待该类生成,然后调用Provider.of<T>(context)方法。

Builder(
  builder: (context) {
    return MaterialApp(
      title: 'My App',debugShowCheckedModeBanner: false,theme: ThemeData.dark(),routes: {
        '/': (BuildContext context) {
          var state = Provider.of<LoginService>(context);
          if (state.isLoggedIn()) {
            return HomeScreen();
          } else {
            return LoginScreen();
          }
        },MentorScreen.id: (BuildContext context) => MentorScreen(),},);
  },),

,以及同一窗口小部件中的两个提供程序。

使用MultiProvider

这是我的一个应用程序中的代码。

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Provider(
    create: (_) => locator<FAuthService>(),builder: (context,_) {
      return MultiProvider(
        child: MaterialApp(
          onGenerateRoute: Router.onGenerateRoute,initialRoute: initialRoute,navigatorKey: locator<NavigationService>().globalKey,title: 'Demo',theme: ThemeData(
            primaryColor: Colors.black,providers: [
          ChangeNotifierProvider<HomeVM>(
            create: (_) => locator<HomeVM>(),ChangeNotifierProvider<LoginVM>(
            create: (context) => locator<LoginVM>(),],);
    });
   }
}