Flutter页面导航报错：Navigator操作的context不包含Navigator

问题原因 #

你当前使用的context属于Reservation组件，而MaterialApp是在这个组件的build方法中返回的——Navigator是MaterialApp内部维护的导航栈，这个上层的context无法访问到MaterialApp内部的Navigator，因此触发报错。

解决方案（两种任选其一） #

方案1：重构组件结构，将MaterialApp作为根组件

把MaterialApp抽离成独立的根组件，让Reservation作为它的home，这样Reservation的context就处于Navigator的子树中：

修改main函数并新增根组件：

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Paynasoft",
      debugShowCheckedModeBanner: false,
      home: const Reservation(),
    );
  }
}

修改Reservation的build方法，移除外层的MaterialApp，直接返回Scaffold：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.green,
      title: Image.asset('image/6.png', fit: BoxFit.cover, height: 32,),
    ),
    body: SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 原有的所有子组件内容保持不变
            Container(
              padding: const EdgeInsets.all(40),
              child: Image.asset('image/paynasoft.png', fit: BoxFit.cover, height: 180,)),
            TextField(controller: username, decoration: InputDecoration(...)),
            // ... 其他输入框、按钮等组件
            Container(
              height: 50,
              width: 350,
              child: FloatingActionButton.extended(
                label: Text("Login", style: TextStyle(fontSize: 25,),),
                backgroundColor: Colors.green,
                onPressed: () {
                  Navigator.push(
                    context, // 现在这个context可以访问到Navigator了
                    MaterialPageRoute(
                      builder: (context) => const MobileScreenLayout(),
                    ),
                  );
                },
              ),
            ),
            // ... 其他组件
          ],
        ),
      ),
    ),
  );
}

方案2：使用Builder获取MaterialApp内部的context

在MaterialApp的home中用Builder包裹Scaffold，Builder会提供一个属于MaterialApp子树的context，用这个context执行导航操作：

修改Reservation的build方法：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: "Paynasoft",
    debugShowCheckedModeBanner: false,
    home: Builder(
      builder: (navContext) => Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Image.asset('image/6.png', fit: BoxFit.cover, height: 32,),
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                // 原有的所有子组件内容保持不变
                Container(
                  padding: const EdgeInsets.all(40),
                  child: Image.asset('image/paynasoft.png', fit: BoxFit.cover, height: 180,)),
                TextField(controller: username, decoration: InputDecoration(...)),
                // ... 其他输入框组件
                Container(
                  height: 50,
                  width: 350,
                  child: FloatingActionButton.extended(
                    label: Text("Login", style: TextStyle(fontSize: 25,),),
                    backgroundColor: Colors.green,
                    onPressed: () {
                      Navigator.push(
                        navContext, // 使用Builder提供的context
                        MaterialPageRoute(
                          builder: (context) => const MobileScreenLayout(),
                        ),
                      );
                    },
                  ),
                ),
                // ... 其他组件
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

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