Flutter问题：BottomNavigationBar标签文本被截断

问题现象 #

使用BottomNavigationBar组件时，其余功能正常，但「Notifications」标签文本被截断为「Notificati...」，即使调整selectedFontSize缩小字体也无法解决。

修复方法 #

1. 自定义标签文本组件，突破默认宽度限制 #

BottomNavigationBar默认会给标签文本设置固定最大宽度，直接用Text组件配置溢出属性可解决截断：

BottomNavigationBarItem _buildItem({int tabItem}) {
  final String? labelText = tabName[tabItem];
  return BottomNavigationBarItem(
    icon: _tabSelected(tabItem),
    label: labelText == ''
        ? ''
        : Text(
            labelText,
            overflow: TextOverflow.visible, // 允许文本完整显示
            softWrap: false,
            style: TextStyle(
              fontSize: 12.sp, // 根据实际需求调整字号
            ),
          ),
  );
}

若希望文本自动缩放适配空间，可改用FittedBox：

label: labelText == ''
    ? ''
    : FittedBox(
        fit: BoxFit.scaleDown,
        child: Text(labelText),
      ),

2. 优化图标占用空间 #

部分图标尺寸过大（比如第2个add_box_outlined设置了35.sp）会挤压文本区域，适当缩小图标尺寸释放空间：

Map<int, Widget> tabIcon = {
  // ...其他图标
  2: Icon(
    Icons.add_box_outlined,
    size: 28.sp, // 从35.sp调整为更小尺寸
  ),
  // ...其他图标
};

3. 完善字体大小配置 #

确保BottomNavigationBar的selectedFontSize和unselectedFontSize设置合理，避免空值：

return BottomNavigationBar(
  // ...其他属性
  selectedFontSize: 12.sp,
  unselectedFontSize: 10.sp,
  // ...其他属性
);

4. 辅助方案：添加Tooltip #

若需保留完整文本但空间有限，可给标签添加Tooltip，用户长按即可查看完整内容：

BottomNavigationBarItem _buildItem({int tabItem}) {
  final String? labelText = tabName[tabItem];
  return BottomNavigationBarItem(
    icon: Tooltip(
      message: labelText,
      child: _tabSelected(tabItem),
    ),
    label: labelText == '' ? '' : Text(labelText, overflow: TextOverflow.ellipsis),
  );
}

原问题效果：「Notifications」标签显示为「Notificati...」，文本被截断。

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