Flutter导航报错：点击ElevatedButton提示Context未包含Navigator

错误原因 #

你的代码存在两个核心问题：

• 上下文层级错误：Home组件的build方法中使用的context属于Home自身，而Home是MaterialApp的父级（Home返回MaterialApp），这个上下文无法访问到MaterialApp内部提供的Navigator实例。
• 重复创建MaterialApp：Profile页面也返回了一个新的MaterialApp，整个Flutter应用只需要一个根MaterialApp，多个实例会导致导航栈混乱，同时也会引发上下文问题。

修复方案 #

1. 重构main.dart，将MaterialApp作为应用根组件 #

把原来的Home拆分为根组件MyApp（负责提供MaterialApp）和页面组件Home（仅返回Scaffold）：

import 'profile.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home",
            style: TextStyle(color: Colors.white, fontSize: 30)),
        toolbarHeight: 70,
        backgroundColor: Colors.blueAccent[100],
      ),
      body: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Profile())
            );
          },
          child: const Text("Navigate to profile")),
    );
  }
}

2. 修改profile.dart，移除多余的MaterialApp #

让Profile仅返回Scaffold，同时修正AppBar的标题错误：

import 'package:flutter/material.dart';
import 'main.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Profile",
            style: TextStyle(color: Colors.white, fontSize: 30)),
        toolbarHeight: 70,
        backgroundColor: Colors.blueAccent[100],
      ),
      body: ElevatedButton(
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const Home()));
          },
          child: const Text("Navigate to home")),
    );
  }
}

修复原理 #

• 整个应用只有一个MaterialApp，它负责管理全局导航栈、主题等核心配置。
• Home和Profile作为MaterialApp的子组件，它们的context可以正确访问到MaterialApp提供的Navigator实例，调用导航方法时就不会再出现上下文错误。

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