Flutter中如何通过Navigator传递BlocProvider？

问题根源 #

你把BlocProvider<AuthBloc>放在了MaterialApp的home属性中，而Flutter的Navigator是MaterialApp内置组件。通过Navigator.pushNamed跳转的页面，上下文属于MaterialApp层级，不在你创建的BlocProvider子树范围内，因此设置菜单找不到AuthBloc实例。而InitialView作为HomePage的子组件，处于BlocProvider子树中，所以能正常读取。

修复方案 #

方案1：将BlocProvider移到MaterialApp外层 #

把BlocProvider包裹在MaterialApp外面，让整个应用（包括内置Navigator）都处于AuthBloc的提供者范围内：

BlocProvider<AuthBloc>(
  create: (context) => AuthBloc(FirebaseAuthProvider()),
  child: MaterialApp(
    // 原MaterialApp的配置项
    ...
    home: const HomePage(),
    ...
  ),
)

方案2：跳转时通过BlocProvider.value传递实例 #

如果不想调整BlocProvider的位置，可以在跳转时用BlocProvider.value包裹设置菜单页面，传递已有的AuthBloc实例：

方法A：在路由配置中处理

MaterialApp(
  ...
  routes: {
    configRoute: (context) => BlocProvider.value(
      value: BlocProvider.of<AuthBloc>(context),
      child: const SettingsMenu(),
    ),
    // 其他路由
  },
)

方法B：直接在push时包裹

// 替换原pushNamed代码
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => BlocProvider.value(
      value: context.read<AuthBloc>(),
      child: const SettingsMenu(),
    ),
  ),
);

内容的提问来源于stack exchange，提问作者Gabriel Ángel Canals Salleras