Flutter BottomNavigationBar如何实现与其他项同高的居中无标签按钮

报错原因 #

你当前触发报错的核心原因是Flutter 2.12及以上版本中，BottomNavigationBarItem的title参数已被正式移除，替换为label参数，使用已废弃的title参数会直接触发编译错误。

你要实现的效果参考如下：
#

修复方案 #

1. 单个导航项代码修改 #

将你定义的中间按钮导航项代码调整为如下内容：

BottomNavigationBarItem(
  icon: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      decoration: const BoxDecoration(
        color: Colors.deepPurple,
        shape: BoxShape.circle
      ),
      padding: const EdgeInsets.all(14),
      child: const Icon(Icons.add, color: Colors.white),
    ),
  ),
  label: '',
)

2. 底部导航栏全局配置调整 #

为了避免空label占据高度导致按钮无法和其他选项对齐，需要给BottomNavigationBar添加对应配置：

Scaffold(
  // 其他Scaffold属性
  bottomNavigationBar: BottomNavigationBar(
    // 固定导航项位置，避免选中时位移
    type: BottomNavigationBarType.fixed,
    // 如果你不需要其他导航项显示文字，可设置以下两个属性为0
    // selectedFontSize: 0,
    // unselectedFontSize: 0,
    // 如果需要其他项显示文字，可单独调整中间按钮的padding值对齐高度
    items: [
      const BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      const BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
      // 上面定义的中间悬浮按钮项
      const BottomNavigationBarItem(icon: Icon(Icons.favorite), label: '收藏'),
      const BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
    ],
  ),
)

额外优化建议 #

如果需要实现完全无凹陷的悬浮效果，不需要使用Scaffold自带的floatingActionButton参数，所有导航项均放在BottomNavigationBar的items列表内即可更方便控制高度对齐。 #

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