Flutter中Navigator内context未定义问题求助

一、先搞懂Context是什么 #

Context是Flutter Widget树的"上下文"，每个Widget都有自己的Context，它记录了这个Widget在整个Widget树中的位置、以及当前环境的主题、路由栈、本地化等信息。Navigator的跳转方法（比如pushNamed）必须依赖Context来找到当前的路由栈，所以必须传入正确的Context才能生效。

二、你的代码问题分析 #

你遇到的Undefined name 'context'错误，核心原因是：

1. 直接在MyApp中返回Navigator，没有用MaterialApp包裹——MaterialApp是Flutter提供的顶层Widget，它会自动初始化并管理Navigator的路由栈，同时为子Widget提供有效的Context。
2. 在_onGenerateRoute的builder中用BuildContext _丢弃了Context参数，导致页面Widget无法获取到关联路由栈的Context。
3. 把FloatingActionButton写在匿名builder里，没有属于自己的Widget build方法，自然拿不到有效的Context。

三、具体修复步骤 #

1. 重构MyApp，用MaterialApp代替直接返回Navigator #

修改后的MyApp代码：

class MyApp extends StatelessWidget {
  const MyApp({Key key = const ValueKey("MyApp")});

  @override
  Widget build(BuildContext context) {
    // 用MaterialApp包裹，它会自动管理Navigator
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: _onGenerateRoute,
    );
  }

  MaterialPageRoute _onGenerateRoute(RouteSettings settings) {
    WidgetBuilder builder = (BuildContext context) => Scaffold(
          body: Center(
            child: Text("Page Not Found"),
          ),
        );
    switch (settings.name) {
      case '/':
        // 把首页拆成单独的Widget，让它自己获取Context
        builder = (BuildContext context) => HomePage();
        break;
      case '/quiz':
        builder = (BuildContext context) => QuizPage();
        break;
      // 新增Page2的路由配置
      case '/Page2':
        builder = (BuildContext context) => Page2();
        break;
    }
    return MaterialPageRoute(builder: builder, settings: settings);
  }
}

2. 把首页内容抽成单独的HomePage Widget #

这样首页的build方法会自动传入有效的Context，用来调用Navigator：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // 这里的context是HomePage的上下文，已经关联到MaterialApp的路由栈
          Navigator.pushNamed(context, '/Page2');
        },
        label: Text("跳转到Page2"),
      ),
      // 首页其他内容
      body: Center(
        child: Text("首页"),
      ),
    );
  }
}

3. 补充Page2的实现 #

只需简单定义一个Page2 Widget即可：

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page2")),
      body: Center(child: Text("这是Page2")),
    );
  }
}

四、关键注意事项 #

• 不要丢弃Context参数：在builder中要用BuildContext context而不是BuildContext _，确保Context能传递到子Widget。
• Context必须在Navigator子树中：只有当Widget是MaterialApp（或Navigator）的子节点时，它的Context才能找到路由栈，才能用来调用Navigator方法。
• 不在构造函数中用Context：Widget构造时还没加入到Widget树，此时Context是无效的，必须在build方法中使用。

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