如何统一Flutter中两个BottomNavigationBar的标签文本样式？

问题原因 #

你的两个BottomNavigationBar标签样式不一致，核心问题在于：

1. 第一个依赖全局ThemeData的colorScheme.primary控制选中标签颜色，但字体大小沿用默认值；
2. 第二个尝试用selectedLabelStyle调整样式，但该属性仅控制选中标签的字体样式（大小、粗细等），颜色需通过selectedItemColor设置，且未统一字体大小配置。

方法一：全局统一配置（推荐） #

在MaterialApp的ThemeData中直接配置BottomNavigationBar的全局样式，所有页面的BottomNavigationBar会自动应用统一规则：

theme: ThemeData(
  colorScheme: ColorScheme.fromSwatch().copyWith(
    primary: Colors.black87, // 选中状态的图标/标签主色
  ),
  bottomNavigationBarTheme: BottomNavigationBarThemeData(
    selectedLabelStyle: TextStyle(
      fontSize: 14, // 统一选中标签字体大小
      color: Colors.black87,
    ),
    unselectedLabelStyle: TextStyle(
      fontSize: 14, // 统一未选中标签字体大小（按需配置）
      color: Colors.grey,
    ),
    selectedItemColor: Colors.black87, // 统一选中状态的图标+标签颜色
    unselectedItemColor: Colors.grey, // 统一未选中状态的图标+标签颜色
  ),
),

之后两个页面的BottomNavigationBar可简化，无需单独设置颜色：

第一个类的BottomNavigationBar代码 #

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.group),
      label: 'Contactos',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.star_border),
      label: '',
    ),
  ],
)

第二个类的BottomNavigationBar代码 #

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: '',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.star),
      label: 'Favoritos',
    ),
  ],
)

方法二：单独设置每个BottomNavigationBar的样式 #

若无需全局统一，可给两个BottomNavigationBar添加完全相同的样式属性：

BottomNavigationBar(
  selectedItemColor: Colors.black87, // 选中状态颜色
  unselectedItemColor: Colors.grey, // 未选中状态颜色
  selectedLabelStyle: TextStyle(fontSize: 14, color: Colors.black87),
  unselectedLabelStyle: TextStyle(fontSize: 14, color: Colors.grey),
  // 其他原有属性
  items: [...],
)

将上述样式属性复制到两个类的BottomNavigationBar中，即可保证样式完全一致。

注意事项 #

• 不要在BottomNavigationBarItem的Icon里单独设置color，否则会覆盖BottomNavigationBar的selectedItemColor/unselectedItemColor配置；
• selectedLabelStyle仅负责字体样式（大小、粗细等），颜色优先通过selectedItemColor统一管理，避免样式分散。

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