Flutter Firebase教程Step5遭遇ProviderNotFoundException问题求助

正在学习Flutter，跟着《Get to know Firebase for Flutter》教程的Step5（添加RSVP功能）操作，在home_page.dart文件中添加指定代码后，出现ProviderNotFoundException错误。

添加的代码片段： #

// Add from here
          Consumer<ApplicationState>(
            builder: (context, appState, _) => AuthFunc(
                loggedIn: appState.loggedIn,
                signOut: () {
                  FirebaseAuth.instance.signOut();
                }),
          ),
// to here

home_page.dart 完整代码： #

import 'package:firebase_auth/firebase_auth.dart' // new
   hide EmailAuthProvider, PhoneAuthProvider;    // new
import 'package:flutter/material.dart';           // new
import 'package:provider/provider.dart';          // new

import 'app_state.dart';                          // new
import 'src/authentication.dart';                 // new
import 'src/widgets.dart';

class HomePage extends StatelessWidget {
 const HomePage({super.key});

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Firebase Meetup'),
     ),
     body: ListView(
       children: <Widget>[
         Image.asset('assets/codelab.png'),
         const SizedBox(height: 8),
         const IconAndDetail(Icons.calendar_today, 'October 30'),
         const IconAndDetail(Icons.location_city, 'San Francisco'),
         // Add from here
         Consumer<ApplicationState>(
           builder: (context, appState, _) => AuthFunc(
               loggedIn: appState.loggedIn,
               signOut: () {
                 FirebaseAuth.instance.signOut();
               }),
         ),
         // to here
         const Divider(
           height: 8,
           thickness: 1,
           indent: 8,
           endIndent: 8,
           color: Colors.grey,
         ),
         const Header("What we'll be doing"),
         const Paragraph(
           'Join us for a day full of Firebase Workshops and Pizza!',
         ),
       ],
     ),
   );
 }
}

错误日志（翻译后）： #

应用已连接到调试服务：ws://127.0.0.1:59701/r_M_M0NpAZc=/ws
调试服务正在监听 ws://127.0.0.1:59701/r_M_M0NpAZc=/ws
正在连接到VM服务：ws://127.0.0.1:59701/r_M_M0NpAZc=/ws
══╡ 组件库捕获到异常 ╞═══════════════════════════════════════════════════════════
构建Consumer<ApplicationState>(dirty)时抛出以下ProviderNotFoundException：
错误：无法在该Consumer<ApplicationState>组件上方找到正确的Provider<ApplicationState>

出现此问题的原因是你使用的`BuildContext`不包含你需要的Provider，常见场景包括：

- 你在`main.dart`中添加了新的Provider，但只执行了热重载。
  解决方法：执行热重启。

- 你尝试读取的Provider位于另一个路由中。
  Provider是“作用域化”的，如果你在某个路由内部插入Provider，其他路由无法访问该Provider。

- 你使用的`BuildContext`是你要读取的Provider的祖先上下文。
  确保Consumer<ApplicationState>位于MultiProvider/Provider<ApplicationState>之下。这种情况通常发生在你创建Provider后立即尝试读取它时。

  示例：错误写法：
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // 会抛出ProviderNotFoundError，因为`context`属于Provider<Example>的父组件
      child: Text(context.watch<Example>().toString()),
    );
  }

  正确写法（使用builder）：
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // 使用`builder`获取能访问到Provider的新BuildContext
      builder: (context, child) {
        // 不再抛出错误
        return Text(context.watch<Example>().toString());
      }
    );
  }


引发错误的相关组件是：
  Consumer<ApplicationState>
  Consumer:file:///D:/flutter_projeler/flutter-codelabs/firebase-get-to-know-flutter/step_02/lib/home_page.dart:26:11

抛出异常时的调用栈：
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:3       throw_
packages/provider/src/provider.dart 343:7                                         _inheritedElementOf
packages/provider/src/provider.dart 293:30                                        of
packages/provider/src/consumer.dart 181:16                                        buildWithChild
packages/nested/nested.dart 259:41                                                build
packages/flutter/src/widgets/framework.dart 5541:22                               build
packages/nested/nested.dart 279:18                                                build
packages/flutter/src/widgets/framework.dart 5471:15                               performRebuild
packages/flutter/src/widgets/framework.dart 5187:7                                rebuild
packages/flutter/src/widgets/framework.dart 2895:18                               buildScope
packages/flutter/src/widgets/binding.dart 984:9                                   drawFrame
packages/flutter/src/rendering/binding.dart 457:5                                 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1325:7                                [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1255:9                                handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1113:5                                [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 1274:5                                invoke
lib/_engine/engine/platform_dispatcher.dart 248:5                                 invokeOnDrawFrame
lib/_engine/engine/initialization.dart 186:36                                     <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 574:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 579:39  dcall

════════════════════════════════════════════════════════════════════════════════════════════════════
应用已结束。

退出代码 (-1)。

这个错误的核心是Consumer<ApplicationState>找不到对应的Provider<ApplicationState>，按以下步骤排查修复：

1. 检查main.dart中的Provider配置
   确保你已经在main.dart中正确添加了Provider<ApplicationState>或MultiProvider，并且将HomePage作为它的子组件。正确配置示例如下：

   void main() {
     runApp(
       ChangeNotifierProvider(
         create: (context) => ApplicationState(),
         child: const MyApp(),
       ),
     );
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Firebase Meetup',
         home: const HomePage(),
       );
     }
   }
   

   确认HomePage的上下文能访问到ApplicationState的Provider。

2. 执行热重启而非热重载
   如果刚在main.dart中添加Provider就直接热重载，会导致上下文无法识别新添加的Provider。此时需要执行热重启（点击IDE热重启按钮，或在终端输入r回车）。

3. 检查Provider的作用域
   确保Provider没有嵌套在某个路由或子组件内部，导致HomePage所在上下文无法访问。Provider应放在应用顶层（比如MaterialApp外层），确保所有子组件都能获取到。

4. 避免在Provider创建时立即读取
   如果在创建Provider的同一上下文里直接读取它，会触发错误。这种情况需使用builder函数获取新上下文，示例：

   Provider<ApplicationState>(
     create: (_) => ApplicationState(),
     builder: (context, child) {
       return HomePage();
     },
   )
   

内容的提问来源于stack exchange，提问作者Güven Acar