Flutter中如何在showModalBottomSheet内实现全屏高度视图跳转？

1. 区分路由类型，在onGenerateRoute中处理全屏跳转 #

既然你已经通过onGenerateRoute处理同高度弹窗的路由，可以在该方法内判断目标路由是否为全屏页面：如果是，直接调用根Navigator完成跳转，避免嵌套Navigator的路由冲突。

示例代码：

onGenerateRoute: (settings) {
  if (settings.name == '/same-height-modal') {
    // 维持原有同高度弹窗的路由逻辑
    return MaterialPageRoute(
      builder: (context) => SameHeightModal(),
      fullscreenDialog: false,
    );
  } else if (settings.name == '/full-screen-page') {
    // 延迟执行根Navigator跳转，避免路由栈异常
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.of(context, rootNavigator: true).pushNamed('/full-screen-page');
    });
    // 返回空路由占位，防止嵌套Navigator报错
    return MaterialPageRoute(builder: (context) => const SizedBox());
  }
  return null;
},

2. 直接调用根Navigator触发全屏跳转 #

在触发全屏跳转的交互事件中，不要使用当前弹窗的Navigator实例，而是通过rootNavigator: true参数获取根Navigator来执行push操作：

ElevatedButton(
  onPressed: () {
    Navigator.of(context, rootNavigator: true).push(
      MaterialPageRoute(builder: (context) => FullScreenPage()),
    );
  },
  child: const Text('跳转到全屏页面'),
)

3. 确保根路由表注册全屏页面 #

在MaterialApp的路由配置中提前注册全屏页面的路由，保证根Navigator能正确匹配目标页面：

MaterialApp(
  routes: {
    '/full-screen-page': (context) => FullScreenPage(),
    // 其他根路由配置
  },
)

这种方式既能保留嵌套Navigator处理同高度弹窗的逻辑，又能正常实现全屏页面的跳转，避免路由栈混乱。

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