多供应商不能在扑朔迷离的物质应用程序中工作？ [英] multi Provider doesn't work in material app in flutter?

问题描述

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

I've created an app and I have used MultiProvider but it doesn't work when I use it inside MaterialApp

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

I want to use it to change app theme color but

它给我一个错误：

*注意：当我在任何其他屏幕上使用帖子提供程序时

*Note: when I use posts provider in any other screen it works.

我的代码：

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>()

推荐答案

以下测试代码可以正常运行，您可以根据情况进行测试

使用 Consumer 包装 MaterialApp

The following test code work without error, you can test with your case
Use Consumer to wrap 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),
      ),
    );
  }
}

这篇关于多供应商不能在扑朔迷离的物质应用程序中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！