使用flutter_bloc时无法在模态框中访问SettingsCubit

开发者阿泽

2026-7-21

BlocProvider在模态框/新页面中抛出ProviderNotFoundException的解决方案

我定义了无状态组件MovieScreen，通过MultiBlocProvider提供SettingsCubit和MovieBloc。MovieList组件中通过BlocBuilder访问MovieBloc一切正常，但在SettingsOverlay中调用BlocProvider.of<SettingsCubit>(context).updateSettings(newSettings)时抛出ProviderNotFoundException。无论是用showModalBottomSheet模态框还是MaterialPageRoute跳转新页面，问题都存在。

疑惑点：是不是因为MovieList和BlocProvider处于同一组件树，而模态框/新页面属于不同子树？如果是这样，BlocProvider.value为什么没能把SettingsCubit传递给SettingsOverlay？

原代码：

MovieScreen组件

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

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<SettingsCubit>(
          create: (_) => SettingsCubit(),
        ),
        BlocProvider<MovieBloc>(
          create: (_) =>
              MovieBloc(httpClient: http.Client())..add(MovieFetched()),
        )
      ],
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Movies'),
          actions: [
            IconButton(
              onPressed: () => {
                showModalBottomSheet(
                  useSafeArea: true,
                  context: context,
                  builder: (_) {
                    return BlocProvider.value(
                      value: context.read<SettingsCubit>(),
                      child: const SettingsOverlay(),
                    );
                  },
                );
              },
              icon: const Icon(Icons.add),
            ),
          ],
        ),
        body: const MovieList(),
      ),
    );
  }
}

SettingsOverlay组件

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Settings")),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              print("save");

              BlocProvider.of<SettingsCubit>(context)
                  .updateSettings(Settings());
            },
            child: const Text("Save"),
          ),
        ],
      ),
    );
  }
}

问题原因

核心问题是**BlocProvider.value未明确指定泛型参数**，导致Dart类型推断出现偏差。当你省略泛型时，BlocProvider.value会被推断为更宽泛的父类类型（比如Bloc），而不是具体的SettingsCubit。这就导致SettingsOverlay中用BlocProvider.of<SettingsCubit>(context)查找时，无法匹配到对应的Provider，从而抛出ProviderNotFoundException。

另外，模态框和新页面确实属于独立的组件子树，但只要正确使用BlocProvider.value传递已有的Cubit实例，是可以在子树中访问到的——你的思路是对的，只是泛型的细节没处理好。

修复方案

在BlocProvider.value处明确指定泛型<SettingsCubit>，确保类型匹配：

修改后的MovieScreen关键代码

IconButton(
  onPressed: () => {
    showModalBottomSheet(
      useSafeArea: true,
      context: context,
      builder: (_) {
        // 明确指定泛型<SettingsCubit>
        return BlocProvider<SettingsCubit>.value(
          value: context.read<SettingsCubit>(),
          child: const SettingsOverlay(),
        );
      },
    );
  },
  icon: const Icon(Icons.add),
),

如果是用MaterialPageRoute跳转新页面，同样需要在路由的builder中用带泛型的BlocProvider.value包裹：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => BlocProvider<SettingsCubit>.value(
      value: context.read<SettingsCubit>(),
      child: const SettingsOverlay(),
    ),
  ),
);

额外验证

你也可以在SettingsOverlay中用context.read<SettingsCubit>()替代BlocProvider.of<SettingsCubit>(context)，效果是一样的，但核心还是要保证BlocProvider.value的泛型正确。

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

使用flutter_bloc时无法在模态框中访问SettingsCubit

原代码： #