Flutter中Navigator.pop如何正确定义路由 附验证码页面实现代码示例

问题根因 #

你遇到的Navigator.pop无法返回的核心原因是你在Verification组件内部又嵌套了一个独立的MaterialApp，每个MaterialApp会维护独立的导航栈，你调用pop时使用的context属于新的内部MaterialApp，它的导航栈里只有当前Verification页面，所以pop后没有上一级页面可返回，并不是路由配置的问题。

解决步骤 #

• 移除Verification组件build方法中返回的外层MaterialApp，直接返回Scaffold即可，让当前页面共用上层全局的MaterialApp的导航栈。
• 如果需要单独配置当前页面的主题等属性，可直接通过Scaffold的属性或者上层Theme组件配置，无需嵌套MaterialApp。
• 如果是通过命名路由跳转进入Verification页面，确保你跳转时使用的是全局MaterialApp的context，路由配置统一放在全局MaterialApp的routes/onGenerateRoute参数中即可。

修改后正确代码 #

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

  @override
  Widget build(BuildContext context) {
    // 移除外层的MaterialApp，直接返回Scaffold
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 30,left: 20),
        child: Column(
          children: [
            Row(
              children: [
                InkWell(
                  onTap: (){
                    // 此时context属于全局导航栈，pop可正常返回上一页
                    Navigator.pop(context);
                  },
                  child: Image.asset(
                    "assets/images/vector.png",
                    scale: 2.5,
                  ),
                ),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.2,
                ),
                const Text(
                  "Verification",
                  style: TextStyle(fontSize: 28, fontWeight: FontWeight.w700),
                ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.only(top: 15),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text("Enter your",
                    style: TextStyle(fontSize: 48, fontWeight: FontWeight.w700),),
                ],
              ),
            ),
            const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text("Verification Code",
                  style: TextStyle(fontSize: 48, fontWeight: FontWeight.w700),),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

全局路由配置参考（命名路由场景） #

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 全局路由统一配置
      routes: {
        '/': (context) => const HomePage(), // 你的上一级页面（示例）
        '/verification': (context) => const Verification(), // 验证码页路由
      },
    );
  }
}

跳转至验证码页调用：
Navigator.pushNamed(context, '/verification');
此时点击返回按钮调用Navigator.pop(context)即可正常回到上一级页面。

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