Flutter中如何在指定页面隐藏底部导航栏？

问题背景 #

你将底部导航栏封装在bottomnavscreen中并设为MaterialApp首页，通过home()页面跳转至detailedpost，再从detailedpost跳转至comment时，底部导航栏始终可见，需在这两个子页面中隐藏它。

解决方法 #

问题核心在于当前跳转是在bottomnavscreen的父Scaffold导航栈内进行，底部导航栏属于该父容器，因此持续显示。推荐以下两种方案：

方案1：使用根Navigator跳转子页面 #

跳转时指定使用MaterialApp的根Navigator，让子页面作为顶层页面覆盖整个屏幕，底部导航栏自然隐藏。

修改跳转代码示例：

// home()跳转至detailedpost的代码
Navigator.of(context, rootNavigator: true).push(
  MaterialPageRoute(
    builder: (context) => detailpost(
      body: document['body'],
      title: document['title'],
      date: document['date'],
    ),
  ),
);

从detailedpost跳转至comment时，同样使用该方式：

Navigator.of(context, rootNavigator: true).push(
  MaterialPageRoute(builder: (context) => comment()),
);

方案2：重构页面导航结构 #

将底部导航栏与标签页的导航栈分离，让每个标签页拥有独立的导航栈，避免子页面继承父容器的底部导航栏：

1. 修改bottomnavscreen的结构：

class _bottomnavscreen extends State<bottomnavscreen> {
  int _selectedIndex = 0;
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.add_circle_outline_sharp), label: 'Create'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          Navigator(
            key: _navigatorKeys[0],
            onGenerateRoute: (_) => MaterialPageRoute(builder: (_) => home()),
          ),
          Navigator(
            key: _navigatorKeys[1],
            onGenerateRoute: (_) => MaterialPageRoute(builder: (_) => create()),
          ),
          Navigator(
            key: _navigatorKeys[2],
            onGenerateRoute: (_) => MaterialPageRoute(builder: (_) => profile()),
          ),
        ],
      ),
    );
  }
}

2. 后续在标签页内跳转子页面时，子页面将在当前标签页的独立导航栈中展示，不会触发底部导航栏的显示。

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