Flutter问题：Scaffold与NavigationBar同背景色却显示不同

问题原因 #

这是Flutter Material 3组件的默认行为：NavigationBar会对设置的backgroundColor自动应用**表层着色（surfaceTint）**和默认的阴影elevation效果，哪怕你传入和Scaffold完全相同的颜色值，这些附加效果也会让NavigationBar的颜色看起来偏暗或有细微色调差异。

简单说，NavigationBar的背景不是纯纯色，而是在你设置的颜色基础上叠加了一层半透明的材质效果，和Scaffold的纯背景色自然会有区别。

解决办法 #

方案1：直接修改NavigationBar参数 #

给NavigationBar添加两个参数，关闭表层着色并取消阴影，就能让背景色完全匹配：

NavigationBar(
  selectedIndex: currentPageIndex,
  onDestinationSelected: (int index) => setState(() => currentPageIndex = index),
  destinations: const <Widget>[
    NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
    NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
  ],
  backgroundColor: Colors.orange,
  indicatorColor: Colors.white,
  // 关键修改：取消阴影和表层着色
  elevation: 0,
  surfaceTintColor: Colors.transparent,
)

方案2：全局主题配置 #

如果项目里有多个NavigationBar，推荐在Theme里统一设置，避免重复修改：

MaterialApp(
  theme: ThemeData(
    navigationBarTheme: NavigationBarThemeData(
      elevation: 0,
      surfaceTintColor: Colors.transparent,
    ),
  ),
  home: const Scaffold(
    body: Center(child: Text('Hello World!')),
    bottomNavigationBar: MyNavigationBar(),
    backgroundColor: Colors.orange,
  ),
)

这样修改后，NavigationBar就会完全使用你指定的纯色背景，和Scaffold的颜色完全一致，不会再出现突兀的色调差。

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