如何解决Flutter Navigator.push()上下文不含Navigator的报错？

报错核心原因非常明确：

Navigator operation requested with a context that does not include a Navigator.

调用Navigator.push/pop这类方法时，Flutter会从传入的context对应节点开始，向上遍历widget树查找最近的Navigator实例。而代码里传入的context是_MyAppState的build方法提供的，这个context对应的widget位置在MaterialApp的上层——Navigator本身就是MaterialApp内部创建的组件，上层节点不可能找到子树里的Navigator，自然抛错。

当前代码的widget树层级可以简化为：

MyApp (调用导航传入的context属于这一层，在MaterialApp之上)
└── MaterialApp (Navigator在这一层才被创建)
    └── Scaffold
        └── ElevatedButton (这一层及以下的context才能找到Navigator)

• 为什么官方示例直接返回Scaffold就能正常用导航？
  官方示例的常规写法是把MaterialApp直接作为runApp的根节点，Scaffold所在的页面组件是作为MaterialApp的home参数传入的，页面组件的build方法拿到的context本身就在MaterialApp的子树里，自然可以正常找到Navigator。
• 为什么应用必须要套MaterialApp？
  MaterialApp是Material设计体系的应用根组件，它内部封装了Flutter应用开发需要的大量核心能力：路由导航（Navigator）、全局主题、多语言适配、路由转场动画、全局调试开关等。如果不包裹MaterialApp，不仅Navigator无法正常工作，Scaffold、AppBar、ElevatedButton这类Material组件也会出现样式异常甚至报错。

你可以任选以下两种方案修复，第二种更符合Flutter的代码组织规范：

方案1：使用Builder获取子树context #

在ElevatedButton外层包裹Builder组件，通过Builder的builder参数拿到MaterialApp子树内的context再调用导航：

body: Builder(
  builder: (context) {
    return ElevatedButton(
      child: const Text('About'),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => const AboutScreen(),
          ),
        );
      },
    );
  },
),

注意：原代码里Scaffold的括号没有闭合，编写时需要补全语法。

方案2：抽离首页为独立组件 #

不要把Scaffold的逻辑直接写在MyApp的build方法里，单独抽离成首页组件，这时候首页组件的context天然属于MaterialApp的子树：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

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

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepOrange,
        title: const Text("Noice!"),
      ),
      body: ElevatedButton(
        child: const Text('About'),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const AboutScreen(),
            ),
          );
        },
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  const AboutScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: const Color.fromARGB(255, 0, 255, 8),
          title: const Text("Flutter ballert")),
    );
  }
}

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