Flutter：FloatingActionButton 中的上下文找不到 <Bloc> 的提供者

Question

这是我第一次在 Flutter 中使用 BLoC 模式。我遇到了提供者和上下文的问题。这是我的 main.dart 文件。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:my_rescue/modules/screens/homepage/bloc/homepage_bloc.dart';
import 'package:my_rescue/widgets/drawer.dart';
import 'package:my_rescue/widgets/text_button.dart';
import 'package:my_rescue/widgets/weather_forecast.dart';
import 'package:my_rescue/widgets/app_bar.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(create: (BuildContext context) => HomepageBloc()..add(LoadHomepage())),
      ],
      child: Scaffold(
        appBar: const UpperNavBar().build(context),
        endDrawer: const CustomDrawer(),
        body: Center(
          child: BlocBuilder<HomepageBloc, HomepageState>(
            builder: (context, state) {
              if (state is HomepageInitial) {
                return CircularProgressIndicator(
                    color: Theme.of(context).colorScheme.primary);
              }
              if (state is HomepageNoEmergency) {
                return Column(
                  children: <Widget>[
                    const WeatherForecast(),
                    CustomTextButton(
                      height: 70,
                      text: "Safe Places",
                      icon: Icon(
                        Icons.map_outlined,
                        color: Theme.of(context).colorScheme.secondary,
                      ),
                      textStyle: Theme.of(context).textTheme.titleLarge,
                    )
                  ],
                );
              }
              if (state is HomepageEmergency) {
                return Column(
                  children: <Widget>[
                    const WeatherForecast(),
                    CustomTextButton(
                      height: 70,
                      text: "Safe Places",
                      icon: Icon(
                        Icons.map_outlined,
                        color: Theme.of(context).colorScheme.secondary,
                      ),
                      textStyle: Theme.of(context).textTheme.titleLarge,
                    ),
                    CustomTextButton(
                        height: 100,
                        text: "HELP!",
                        textStyle: Theme.of(context).textTheme.titleLarge)
                  ],
                );
              } else {
                return const Center(
                  child: Text("Something went wrong"),
                );
              }
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read<HomepageBloc>().add(EmergencyHappened());
          },
        ),
      ),
    );
  }
}

floatActionButton 只是为了测试事件和状态是否运行良好。然而，当我按下 Android 模拟器上的按钮时，它告诉我

无法在此主页小部件上方找到正确的提供程序

经过一些研究后，我发现 MultiBlocProvider 应该能够为小部件树的其余部分提供上下文。就我而言，这包括 FloatingActionButton。但是，它似乎没有传递上下文。

任何帮助表示赞赏！预先非常感谢！

我还尝试过使用 BlocProvider 和 BlocProvider.of<HomepageBloc>(context).add(EmergencyHappened())。但这也告诉我找不到 HomepageBloc。我希望该按钮工作正常，并且能够更改状态以在我的应用程序中显示“帮助”按钮。我还了解互联网上的一些问题涉及导航器推送和弹出页面，但我的问题只是在同一页面内。没什么额外的。

Answer 1

问题是，您尝试获取块的上下文是，所以build()它在它的外部树中搜索，但您的块是内部的，所以您需要一个可以获取它的新上下文。

FloatingActionButton用这样的方式包裹你的Builder：

floatingActionButton: Builder(
  builder: (context) {
    return FloatingActionButton(
          onPressed: () {
            context.read<HomepageBloc>().add(EmergencyHappened());
          },
        );
    }
  ),

这将使查找从Builder的上下文开始。