Flutter BlocProvider：从传递的上下文开始找不到祖先？

Question

根据 flutter_bloc 文档，使用 Bloc Provider 包装小部件就足够了，以便使用小部件中的 Bloc 实例。但是，我收到此错误：

从传递给 BlocProvider.of() 的上下文开始找不到祖先。

我的代码非常简单，结构如下：

登录屏幕.dart

class LoginPage extends StatefulWidget {
  const LoginPage({super.key, required this.title});

  final String title;

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwortController = TextEditingController();

  @override
  Widget build(BuildContext context) {

    return BlocProvider(
      create: (context) => AuthenticationBloc(),
      child: Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [

                //Username
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: TextField(
                    controller: _usernameController,
                    decoration: const InputDecoration(
                      labelText: "Email",
                      border: OutlineInputBorder()
                    ),
                  ),
                ),
    
                //Passwort:
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: TextField(
                    controller: _passwortController,
                    obscureText: true,
                    decoration: const InputDecoration(
                      labelText: "Password",
                      border: OutlineInputBorder()
                    ),
                  ),
                ),
    
                //Login button
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    minimumSize: const Size(200, 50)
                  ),
                  onPressed: () {

                    BlocProvider.of<AuthenticationBloc>(context).add(
                      LoginEvent(_usernameController.text, _passwortController.text)
                    );
    
                  }, 
                  child: const Text('Log in')
                ),
                const SizedBox(height: 20,),
                //Register button
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    minimumSize: const Size(200, 50)
                  ),
                  onPressed: () async {
    
                  },
                  child: const Text('Register')
                ),
              ],
            ),)
        ),
    );
  }
}

main.dart

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  await service_registration.init();

  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const LoginPage(title: 'Flutter Demo Home Page'),
    );
  }
}

知道为什么会发生这种情况吗？

Answer 1

您是否尝试过将创建参数中的“上下文”重命名为其他名称？

来自：

create: (context) => AuthenticationBloc()

到

create: (context2) => AuthenticationBloc()

有时会碰巧得到错误的上下文，显然，那里不会有 Bloc。

但我强烈建议您在 MyApp 类上的 MaterialApp 之前提供块。就像下面这样：

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

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => AuthenticationBloc(),
        ),
        BlocProvider(
          create: (context) => MySecondBloc(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
        ),
      home: const LoginPage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

通过这样做，您可以在应用程序的任何位置访问您的块。请注意不要在 blocstart 上获取大量数据