兩個提供商合二為一 - Flutter

Question

我有這個問題。 在我的應用程序中，我使用Provider package來管理登錄 State。 在 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...甚至在一個小部件中使用兩個不同的 Providers（例如，將我的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',
          debugShowCheckedModeBanner: false,
          theme: state.isDarkThemeEnabled() == true ? ThemeData.dark() : ThemeData.light(),
          ...

Answer 1

您可以使用 MultiProvider 代替 ChangeNotifierProvider。 在這里閱讀更多。

Answer 2

當您在創建ChangeNotifierProvider class 之后使用context時，就會出現這種類型的錯誤。

同樣，如果使用Scaffold的context來 showDialog 會給出類似的錯誤。 這是解釋為什么會發生這種情況的答案

對於此包裝，您在Builder Class 中的MaterialApp Widget 將等待 class 首先構建，然后調用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,
          debugShowCheckedModeBanner: false,
          title: 'Demo',
          theme: ThemeData(
            primaryColor: Colors.black,
           ),
        ),
        providers: [
          ChangeNotifierProvider<HomeVM>(
            create: (_) => locator<HomeVM>(),
          ),
          ChangeNotifierProvider<LoginVM>(
            create: (context) => locator<LoginVM>(),
          ),
        ],
      );
    });
   }
}