flutter - 多提供者在 flutter 中的 Material 应用程序中不起作用？

Question

我已经创建了一个应用程序并且我使用了 MultiProvider，但是当我在 MaterialApp 中使用它时它不起作用

我想用它来更改应用程序主题颜色，但是

它给了我一个错误:

*注意:当我在任何其他屏幕中使用帖子提供程序时，它都可以工作。

我的代码:

import 'package:blog_app/provider/posts.dart';
import 'package:blog_app/provider/settings.dart';
import 'package:blog_app/screens/splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<Posts>(
          builder: (context) => Posts(),
        ),
        ChangeNotifierProvider<Settings>(
          builder: (context) => Settings(),
        ),
      ],
      child: MaterialApp(
        darkTheme: Provider.of<Settings>(context).darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
        debugShowCheckedModeBanner: false,
        title: 'Blogy',
        theme: ThemeData(
          primaryColor: Colors.deepPurple[900],
          cursorColor: Colors.deepPurple[900],
          accentColor: Colors.deepPurple[900],
          fontFamily: 'Ubuntu',
        ),
        home: SplashScreen(),
      ),
    );
  }
}

错误 :-

I/flutter ( 9316): The following ProviderNotFoundError was thrown building MyApp(dirty):
I/flutter ( 9316): Error: Could not find the correct Provider<Settings> above this MyApp Widget
I/flutter ( 9316):
I/flutter ( 9316): To fix, please:
I/flutter ( 9316):
I/flutter ( 9316):   * Ensure the Provider<Settings> is an ancestor to this MyApp Widget
I/flutter ( 9316):   * Provide types to Provider<Settings>
I/flutter ( 9316):   * Provide types to Consumer<Settings>
I/flutter ( 9316):   * Provide types to Provider.of<Settings>()

Answer 1

以下测试代码正常工作，您可以使用您的案例进行测试
使用 Consumer包装 MaterialApp
代码片段

return MultiProvider(
      providers: [
        ChangeNotifierProvider<Posts>(
          create: (context) => Posts(),
        ),
        ChangeNotifierProvider<Settings>(
          create: (context) => Settings(darkModeEnabled: true),
        ),
      ],
      child: Consumer<Settings>(builder: (_, settings, child) {
        return MaterialApp(
          darkTheme:
              settings.darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
          debugShowCheckedModeBanner: false,
          title: 'Blogy',
          theme: ThemeData(
            primaryColor: Colors.deepPurple[900],
            cursorColor: Colors.deepPurple[900],
            accentColor: Colors.deepPurple[900],
            fontFamily: 'Ubuntu',
          ),
          home: SplashScreen(),
        );
      }),
    );

完整的测试代码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class Posts extends ChangeNotifier {}

class Settings extends ChangeNotifier {
  bool darkModeEnabled;
  Settings({this.darkModeEnabled});
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<Posts>(
          create: (context) => Posts(),
        ),
        ChangeNotifierProvider<Settings>(
          create: (context) => Settings(darkModeEnabled: true),
        ),
      ],
      child: Consumer<Settings>(builder: (_, settings, child) {
        return MaterialApp(
          darkTheme:
              settings.darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
          debugShowCheckedModeBanner: false,
          title: 'Blogy',
          theme: ThemeData(
            primaryColor: Colors.deepPurple[900],
            cursorColor: Colors.deepPurple[900],
            accentColor: Colors.deepPurple[900],
            fontFamily: 'Ubuntu',
          ),
          home: SplashScreen(),
        );
      }),
    );
  }
}

class SplashScreen extends StatefulWidget {
  SplashScreen({Key key}) : super(key: key);

  //final String title;

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}