Flutter BottomAppBar设为白色却比页面背景偏暗的问题

你遇到的问题核心原因是 BottomAppBar 默认带有阴影（elevation属性），即便你设置了color: Colors.white，阴影叠加效果会让它视觉上比页面纯白背景更暗。

快速解决方法 #

直接给BottomAppBar添加elevation: 0属性，彻底移除阴影效果：

BottomAppBar(
  height: 50,
  color: Colors.white,
  elevation: 0, // 关键：移除默认阴影
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(
          width: 30,
          child: IconButton(
            constraints: const BoxConstraints(),
            style: const ButtonStyle(
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            padding: EdgeInsets.zero,
            icon: Icon(Icons.archive, color: Colors.white, size: 30),
          )
      ),
      // 其他子组件...
    ],
  ),
)

额外排查方向 #

如果添加elevation:0后仍有偏暗问题，检查以下两点：

• 查看MaterialApp的主题配置，确认bottomAppBarTheme里没有默认样式覆盖：

  ThemeData(
    bottomAppBarTheme: const BottomAppBarTheme(
      elevation: 0,
      color: Colors.white,
    ),
  )
  

• 检查BottomAppBar的父组件是否存在透明度、遮罩或背景滤镜，这些也会导致视觉上的颜色偏差。

附问题截图：

内容的提问来源于stack exchange，提问作者Jaczura Zoltán