让Flutter AppBar颜色保持一致

直接修改AppBar属性 #

如果使用默认AppBar组件，直接指定单一背景色，并移除阴影避免视觉分层：

AppBar(
  backgroundColor: Colors.grey[200], // 替换为你需要的浅灰/深灰，比如Colors.grey[800]
  elevation: 0, // 消除阴影导致的深浅视觉差
  title: const Text('页面标题'),
)

全局主题统一配置 #

如果需要整个应用的AppBar都统一颜色，修改全局主题的appBarTheme：

MaterialApp(
  theme: ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: Color(0xFFF5F5F5), // 自定义浅灰色值
      elevation: 0,
    ),
  ),
  home: const YourHomePage(),
)

排查自定义AppBar #

如果是自定义的AppBar（比如用PreferredSize包裹容器），检查是否存在嵌套容器设置了不同背景色，统一为单一颜色即可：

PreferredSize(
  preferredSize: const Size.fromHeight(kToolbarHeight),
  child: Container(
    color: Colors.grey[800], // 统一深灰色
    child: const Row(
      children: [
        // 标题、图标等组件
      ],
    ),
  ),
)

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