Flutter中BottomNavigationBar莫名变透明，未改代码该如何解决？

下面是几种常见的排查和解决思路：

1. 修正BottomNavigationBar的Type属性 #

当BottomNavigationBar的item数量≥4时，Flutter默认会将type设为BottomNavigationBarType.shifting，这种模式下backgroundColor不会直接生效，而是由每个BottomNavigationBarItem的背景色控制。显式设置type: BottomNavigationBarType.fixed即可让backgroundColor生效：

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.blue,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.book),
      label: 'Mags',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.star_outlined),
      label: 'Featured',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.bookmark),
      label: 'Saved',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.apps_rounded),
      label: 'Shelf',
    ),
  ],
),

2. 检查Scaffold的extendBody属性 #

如果Scaffold的extendBody被设置为true，页面body会延伸到底部导航栏下方，视觉上会让导航栏看起来透明。确保该属性为false：

Scaffold(
  extendBody: false,
  bottomNavigationBar: BottomNavigationBar(...),
  // 其他页面代码
)

3. 清理缓存并重启项目 #

可能是Flutter缓存或IDE缓存导致的异常状态，执行以下操作：

• 运行命令：flutter clean
• 关闭并重启IDE
• 重启模拟器/真机后重新运行项目

4. 固定主题中的导航栏配置 #

检查APP的主题配置，避免主题变更（如亮色/暗色模式切换、依赖更新）影响导航栏样式，直接在ThemeData中固定导航栏的背景色和类型：

MaterialApp(
  theme: ThemeData(
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      backgroundColor: Colors.blue,
      type: BottomNavigationBarType.fixed,
    ),
  ),
  home: YourHomePage(),
)

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