Flutter报错：无法在Due Widget上方找到正确Provider的解决方法

问题原因 #

你遇到的Could not find the correct Provider above this Due Widget错误，核心是Provider层级配置错误：

• 你把MultiBlocProvider放在了MaterialApp的home属性里，这意味着只有Uno页面（及其子Widget）能访问到两个Cubit实例。
• 而MaterialApp的routes配置的页面（比如Due），直接挂载在MaterialApp的导航上下文下，不在MultiBlocProvider的子树范围内，跳转后Due无法找到Counter2Cubit的实例。

解决方案 #

把MultiBlocProvider移到MaterialApp的外层，让整个应用的所有页面都能共享这两个Cubit实例。这样不管是通过home还是routes跳转的页面，都能在上下文中找到对应的Provider。

修改后的核心代码 #

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // 将MultiBlocProvider放在MaterialApp外层，覆盖整个应用上下文
    return MultiBlocProvider(
      providers:[
        BlocProvider(create: (_) => CounterCubit()),
        BlocProvider(create: (_) => Counter2Cubit()),
      ],
      child: MaterialApp(
        title: 'Material App',
        routes: {
          '/uno' : (context) => const Uno(),
          '/due' : (context) => const Due(),
        },
        home: const Uno(),
      ),
    );
  }
}

额外提示 #

注意Due页面里的返回按钮代码，当前是重复创建Due页面（Navigator.push(context, MaterialPageRoute(builder: (context) => Due()))），会导致页面栈无限叠加，建议改成跳回Uno：

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/uno');
  },
  child: const Text('Precedente'),
),

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