Flutter中NavigationBar标签颜色修改方法咨询

NavigationDestination的label参数仅支持字符串，无法直接传入Text组件自定义样式，你可以通过以下两种方式修改标签文字颜色：

方法1：直接给NavigationBar设置labelTextStyle #

利用MaterialStateProperty.resolveWith区分选中和未选中状态，针对性设置文字颜色：

bottomNavigationBar: NavigationBar(
  backgroundColor: Colors.lightBlue[100]!,
  // 自定义标签文字样式
  labelTextStyle: MaterialStateProperty.resolveWith((states) {
    // 选中状态下的文字样式
    if (states.contains(MaterialState.selected)) {
      return const TextStyle(color: Colors.white, fontSize: 14);
    }
    // 未选中状态下的文字样式
    return const TextStyle(color: Colors.grey, fontSize: 12);
  }),
  destinations: const [
    NavigationDestination(
      icon: Icon(Icons.home, color: Colors.white),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.money, color: Colors.white),
      label: 'Expenses',
    ),
  ],
),

方法2：通过ThemeData全局配置 #

如果需要让所有NavigationBar统一标签样式，可以在MaterialApp的主题中配置：

MaterialApp(
  theme: ThemeData(
    navigationBarTheme: NavigationBarThemeData(
      labelTextStyle: MaterialStateProperty.resolveWith((states) {
        return states.contains(MaterialState.selected)
            ? const TextStyle(color: Colors.white)
            : const TextStyle(color: Colors.grey);
      }),
    ),
  ),
  home: const YourHomePage(),
);

这两种方式都是通过Flutter提供的状态样式机制，控制NavigationBar内部生成的标签文本组件样式，完美适配选中/未选中的状态切换。

内容的提问来源于stack exchange，提问作者Audrius Šaučiūnas