Flutter模态路由设置问题：返回指定页面出现黑屏

你的代码存在两个核心问题导致点击取消按钮后出现黑屏：

1. 未执行导航操作：仅定义了mainPageRoute变量，但没有调用Flutter导航API完成页面跳转，点击按钮后页面无任何变化，被误认为黑屏。
2. 路由判断逻辑冗余：重复的条件判断可以简化，同时如果路由名配置与main.dart中注册的不一致，也会导致跳转失败。

以下是几种可靠的修复方案，根据你的路由栈需求选择：

方案1：简化路由判断+直接跳转 #

通过数组包含判断简化逻辑，使用pushReplacementNamed替换当前路由，避免路由栈堆积：

IconButton(
  onPressed: () {
    final currentRoute = ModalRoute.of(context)?.settings.name;
    // 判断当前是否为目标测验页面
    if ([DartQuiz1.id, DartQuiz2.id].contains(currentRoute)) {
      Navigator.pushReplacementNamed(context, DartPage.id);
    } else {
      Navigator.pushReplacementNamed(context, '/');
    }
  },
  icon: const Icon(Icons.cancel),
)

方案2：直接回到DartPage（推荐） #

如果你的页面跳转流程是DartPage → DartQuiz1/DartQuiz2 → 结果页，可以直接使用popUntil跳过中间页面，直接回到DartPage，无需判断当前路由：

IconButton(
  onPressed: () {
    // 不管路由栈中有多少层，直接回到DartPage
    Navigator.popUntil(context, ModalRoute.withName(DartPage.id));
  },
  icon: const Icon(Icons.cancel),
)

额外检查点 #

确保main.dart中已正确注册所有页面路由，示例如下：

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomePage(),
    DartPage.id: (context) => const DartPage(),
    DartQuiz1.id: (context) => const DartQuiz1(),
    DartQuiz2.id: (context) => const DartQuiz2(),
    // 务必注册结果页的路由
    ResultPage.id: (context) => const ResultPage(),
  },
)

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