Flutter导航时隐藏Tabbar：跳转第二页如何移除BottomNavigationBar

出现该问题的原因是你当前的页面切换逻辑是替换根Scaffold的body内容，BottomNavigationBar作为根Scaffold的固定属性，自然会在所有body对应的页面上常驻展示。以下是3种可行的实现方案：

• 方案1：为每个Tab配置独立嵌套导航栈（最推荐）
  该方案符合Flutter官方路由设计规范，无需额外维护显隐状态，后续扩展Tab内多页面路由也更灵活。
  首先修改你原有showPage方法，给每个Tab包上独立的Navigator作为子导航栈：

Widget showPage(int selectedPage) {
  return Navigator(
    key: GlobalKey<NavigatorState>(),
    onGenerateRoute: (settings) {
      late Widget page;
      if (selectedPage == 0) {
        page = const NewsView(id: '1');
      } else if (selectedPage == 1) {
        page = const Settings();
      }
      return MaterialPageRoute(builder: (_) => page);
    },
  );
}

在需要跳转到无Tabbar的第二页时，调用根导航器执行跳转即可，新页面会完全覆盖根Scaffold，自动隐藏BottomNavigationBar：

// 写在NewsView等Tab内页面的跳转逻辑中
Navigator.of(context, rootNavigator: true).push(
  MaterialPageRoute(builder: (context) => const SecondPage()),
);

• 方案2：动态控制BottomNavigationBar显隐
  通过状态变量直接控制根Scaffold的bottomNavigationBar是否渲染，适合页面逻辑简单的场景。
  首先在根页面定义状态变量：

bool _showBottomNav = true;

修改Scaffold的bottomNavigationBar配置：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: /* 你的原有AppBar配置 */,
    body: showPage(selectedPage),
    // 显隐控制逻辑
    bottomNavigationBar: _showBottomNav ? BottomNavigationBar(
      // 你的原有BottomNavigationBar配置
    ) : null,
  );
}

跳转前将_showBottomNav设为false，第二页关闭返回根页面时再重置为true即可，状态同步可以通过回调函数、Provider/Riverpod等状态管理工具实现。

• 方案3：跳转时指定全屏弹窗模式
  跳转时将新页面设置为全屏弹窗，会直接覆盖整个根页面，自动隐藏BottomNavigationBar，改造成本最低：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const SecondPage(),
    fullscreenDialog: true,
  ),
);

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