如何在Flutter中用Material 3 NavigationBar实现无标签无间距的Gmail式底部导航

使用Material 3的NavigationBar组件时，想要实现类似Gmail的底部导航栏样式——不显示文本标签，且完全不预留标签文本的空间。目前已将NavigationDestination的label设为空字符串，但底部导航栏仍存在标签预留空间，实际效果和预期不符。

现有代码 #

bottomNavigationBar: NavigationBar(
  backgroundColor: const Color(0xFFF2F6F3),
  indicatorColor: const Color(0xFFB9F0CB),
  selectedIndex: _currentIndex,
  onDestinationSelected: (int index) {
    setState(() {
      _currentIndex = index;
    });
  },
  // selectedLabelStyle: const TextStyle(fontSize: 0),
  // unselectedLabelStyle: const TextStyle(fontSize: 0),
  destinations: const <NavigationDestination>[
    NavigationDestination(
      selectedIcon: Icon(Icons.window),
      icon: Icon(Icons.window_outlined),
      label: '',
    ),
    NavigationDestination(
      selectedIcon: Icon(Icons.search),
      icon: Icon(Icons.search_outlined),
      label: '',
    ),
    NavigationDestination(
      selectedIcon: Icon(Icons.person),
      icon: Icon(Icons.person_outline),
      label: '',
    ),
  ],
),

实际效果 #

预期效果 #

提供两种可行的实现方式：

方法一：使用官方属性隐藏标签（推荐） #

Material 3的NavigationBar内置了labelBehavior参数，设置为NavigationDestinationLabelBehavior.alwaysHide即可完全隐藏标签，同时自动移除标签预留空间，无需额外调整：

bottomNavigationBar: NavigationBar(
  backgroundColor: const Color(0xFFF2F6F3),
  indicatorColor: const Color(0xFFB9F0CB),
  selectedIndex: _currentIndex,
  onDestinationSelected: (int index) {
    setState(() {
      _currentIndex = index;
    });
  },
  // 添加此行，彻底隐藏标签及预留空间
  labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
  destinations: const <NavigationDestination>[
    NavigationDestination(
      selectedIcon: Icon(Icons.window),
      icon: Icon(Icons.window_outlined),
      label: '', // 此处可留空或填写标签文本（均会被隐藏）
    ),
    NavigationDestination(
      selectedIcon: Icon(Icons.search),
      icon: Icon(Icons.search_outlined),
      label: '',
    ),
    NavigationDestination(
      selectedIcon: Icon(Icons.person),
      icon: Icon(Icons.person_outline),
      label: '',
    ),
  ],
),

方法二：自定义高度+隐藏标签样式 #

如果需要手动控制导航栏高度，可以设置height属性，同时将标签样式设为完全不可见：

bottomNavigationBar: NavigationBar(
  backgroundColor: const Color(0xFFF2F6F3),
  indicatorColor: const Color(0xFFB9F0CB),
  selectedIndex: _currentIndex,
  onDestinationSelected: (int index) {
    setState(() {
      _currentIndex = index;
    });
  },
  // 设置适配无标签的导航栏高度
  height: 56,
  // 隐藏标签的样式，移除预留空间
  selectedLabelStyle: const TextStyle(height: 0, fontSize: 0),
  unselectedLabelStyle: const TextStyle(height: 0, fontSize: 0),
  destinations: const <NavigationDestination>[
    NavigationDestination(
      selectedIcon: Icon(Icons.window),
      icon: Icon(Icons.window_outlined),
      label: '',
    ),
    NavigationDestination(
      selectedIcon: Icon(Icons.search),
      icon: Icon(Icons.search_outlined),
      label: '',
    ),
    NavigationDestination(
      selectedIcon: Icon(Icons.person),
      icon: Icon(Icons.person_outline),
      label: '',
    ),
  ],
),

说明 #

方法一是官方推荐的标准实现，简洁且符合Material 3设计规范；方法二适合需要自定义导航栏高度的特殊场景。

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