Flutter配置appBarTheme后覆盖bottomNavigationBarTheme样式问题

核心问题是你给BottomNavigationBar设置背景色时引用错了主题属性，和主题本身的配置优先级无关：

• 你在BottomNavigationBar的backgroundColor参数中写的是Theme.of(context).appBarTheme.backgroundColor，等于直接把AppBar主题的背景色赋值给了底部导航栏。
• 当你没有配置AppBarTheme时，appBarTheme.backgroundColor的值为null，此时BottomNavigationBar会自动回退读取主题中BottomNavigationBarThemeData配置的蓝色，所以看起来显示正常。
• 当你添加AppBarTheme配置后，appBarTheme.backgroundColor拿到了你设置的粉色值，组件会优先使用你手动传入的参数值，直接覆盖BottomNavigationBarThemeData的默认配置，所以底部导航栏就变成了粉色。

至于硬编码红色也不生效的问题，是因为Flutter Material3模式下，BottomNavigationBar默认会添加surfaceTintColor的颜色蒙层，如果没有手动把这个属性设为透明，你设置的背景色会被蒙层叠加，无法显示为原本的纯色。

1. 修正BottomNavigationBar的背景色取值逻辑，不要引用AppBar的主题属性，改为读取底部导航栏自身的主题配置
2. 给主题和组件添加surfaceTintColor: Colors.transparent配置，关闭M3的蒙层效果，保证背景色正常显示
3. 暗色主题记得补充brightness: Brightness.dark属性，否则系统无法正确识别主题类型，也可能引发其他颜色适配问题

修正后的主题配置示例 #

static final ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  // 暗色主题建议使用深色背景，当前配置的白色不符合暗色模式常规设计，可按需调整
  scaffoldBackgroundColor: const Color(0xFF121212),
  appBarTheme: const AppBarTheme(
    backgroundColor: Colors.pink
  ),
  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
    backgroundColor: Colors.blue,
    surfaceTintColor: Colors.transparent
  )
);

修正后的BottomNavigationBar代码 #

bottomNavigationBar: BottomNavigationBar(
  onTap: (index){
    setState(() {
      _currentIndex = index;
    });
  },
  currentIndex: _currentIndex,
  unselectedItemColor: Colors.grey,
  selectedItemColor: Colors.white,
  // 改为读取底部导航栏主题的背景色
  backgroundColor: Theme.of(context).bottomNavigationBarTheme.backgroundColor,
  surfaceTintColor: Theme.of(context).bottomNavigationBarTheme.surfaceTintColor,
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.star), label: "examples"),
    BottomNavigationBarItem(icon: Icon(Icons.add), label: "counter"),
  ]
),

你的AppBar组件的背景色取值逻辑是正确的，不需要修改，只要保持读取appBarTheme.backgroundColor就能正常跟随主题切换。

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