Flutter页面跳转报错：Navigator操作的上下文不包含Navigator

错误原因 #

你遇到的Navigator operation requested with a context that does not include a Navigator错误，核心原因是调用Navigator.push时使用的上下文（context）不属于MaterialApp的子树。

在你的主页面代码中，TextFieldExampleApp的build方法直接返回MaterialApp，而你用来调用导航的context是TextFieldExampleApp自身的上下文——这个上下文在MaterialApp的层级之上，无法访问到MaterialApp内部维护的Navigator实例。

解决方案 #

这里提供两种简单有效的修复方式：

方法1：将主页面内容抽为独立Widget #

把原来放在MaterialApp的home参数里的Scaffold抽成一个单独的StatelessWidget，这样新Widget的上下文就属于MaterialApp的子树，能正常访问Navigator。

修改后的主页面代码：

import 'package:flutter/material.dart';
import 'package:notepad/screens/Note.dart';

class TextFieldExampleApp extends StatelessWidget {
  const TextFieldExampleApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomeScreen(), // 替换为新的Widget
    );
  }
}

// 新增的主页面内容Widget
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => const Note()));
          }),
      appBar: AppBar(
        leading: const Icon(Icons.search),
        title: TextField(
          onChanged: (String value) {
            if (value == '13') {
              print("Right number entered");
            }
          },
        ),
        backgroundColor: Colors.yellow,
      ),
      body: const Center(
        child: ListOfNotes(),
      ),
    );
  }
}

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

方法2：使用Builder组件包裹FloatingActionButton #

如果不想拆分Widget，可以用Builder组件包裹FloatingActionButton，Builder会提供一个属于MaterialApp子树的上下文。

修改后的FloatingActionButton部分代码：

floatingActionButton: Builder(
  builder: (context) {
    return FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => const Note()));
        });
  },
),

验证 #

两种方法都能让你正确获取到包含Navigator的上下文，点击按钮后就能正常跳转到"Note taking screen"页面。

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