Flutter报错：无法在HomeScreen组件上方找到正确的SignInProvider

错误信息 #

Error: Could not find the correct Provider<SignInProvider> above this HomeScreen Widget

问题代码 #

MyApp 组件 #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => SignInProvider(),
        ),
        ChangeNotifierProvider(
          create: (context) => InternetProvider(),
        )
      ],
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

HomeScreen 组件 #

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final sp = context.watch<SignInProvider>();
    return Scaffold(
      // Scaffold details
    );
  }
}

错误原因 #

MaterialApp会创建独立的上下文环境，HomeScreen作为MaterialApp的home属性直接传入时，它的上下文属于MaterialApp的上下文树，无法访问到MaterialApp上层MultiProvider提供的实例。Provider的作用域基于Flutter上下文树层级，只有子上下文才能访问父上下文提供的Provider实例。

解决方法 #

方法一：用Builder包裹HomeScreen #

通过Builder组件创建新的子上下文，让HomeScreen能访问到MultiProvider所在的父上下文：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => SignInProvider(),
        ),
        ChangeNotifierProvider(
          create: (context) => InternetProvider(),
        )
      ],
      child: MaterialApp(
        home: Builder(
          builder: (context) => HomeScreen(),
        ),
      ),
    );
  }
}

方法二：调整嵌套顺序，将MultiProvider放在MaterialApp内部 #

把MultiProvider移到MaterialApp的home属性中，让HomeScreen处于MultiProvider的上下文作用域内：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MultiProvider(
        providers: [
          ChangeNotifierProvider(
            create: (context) => SignInProvider(),
          ),
          ChangeNotifierProvider(
            create: (context) => InternetProvider(),
          )
        ],
        child: HomeScreen(),
      ),
    );
  }
}

额外提示 #

SignInProvider构造函数中直接调用异步方法checkSignInUser并触发notifyListeners()，虽不是本次报错原因，但可能导致组件初始化时状态异常，建议将这类异步初始化逻辑移到initState（若使用StatefulWidget）或通过FutureBuilder处理。

内容的提问来源于stack exchange，提问作者Dasun Dola