Flutter中Navigator.push无报错但无法跳转页面的技术问题咨询

我来帮你搞定这个跳转失效的问题！你遇到的核心问题其实很清晰——你调用Navigator.push时用的context，根本找不到Flutter的Navigator组件。

为什么会这样？因为你在_MyHomePageState的build方法里直接返回了MaterialApp，而Navigator是MaterialApp内部自动创建的组件。当你用当前的context去请求Navigator时，它会沿着组件树往上找，可此时的context属于MyHomePage，它的父节点还没到MaterialApp，自然找不到Navigator，这就抛出了控制台里的断言错误。

下面给你两种最常用的解决办法：

方法一：把MaterialApp移到MyHomePage外部（推荐） #

这是最规范的做法，让MyHomePage成为MaterialApp的子页面，这样它的context就能正确关联到MaterialApp内部的Navigator。修改后的代码如下：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Main page"),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              'this is main page',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 50,
              ),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) {
                    return TestPage();
                  }),
                );
              },
              child: Text('go to test page'),
            ),
          ],
        ),
      ),
    );
  }
}

// 你的TestPage示例（如果还没定义的话）
class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Test Page")),
      body: Center(child: Text("This is Test Page")),
    );
  }
}

方法二：用Builder组件获取子级Context（适合特殊场景） #

如果因为某些原因，你必须在_MyHomePageState的build里保留MaterialApp，可以用Builder组件包裹按钮，它会提供一个属于MaterialApp后代的新context，这样就能正确找到Navigator了：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Main page"),
          backgroundColor: Colors.black,
        ),
        body: Center(
          child: Column(
            children: [
              Text(
                'this is main page',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 50,
                ),
              ),
              // 用Builder生成子级context
              Builder(
                builder: (ctx) {
                  return RaisedButton(
                    onPressed: () {
                      Navigator.push(
                        ctx, // 这里用Builder提供的ctx，而非外部的context
                        MaterialPageRoute(builder: (context) {
                          return TestPage();
                        }),
                      );
                    },
                    child: Text('go to test page'),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

两种方法都能解决你的问题，推荐用第一种，它更符合Flutter的组件树结构规范。

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