Flutter开发亚马逊克隆应用：如何统一两处颜色？

针对你开发亚马逊克隆App时遇到的状态栏和AppBar颜色不统一的问题，给你几个可行的解决方案：

方案1：直接同步AppBar背景色（最简单） #

默认情况下，Flutter的AppBar会自动让状态栏颜色匹配自身的背景色，你只需要设置AppBar的backgroundColor，状态栏就会自动跟上：

appBar: AppBar(
  backgroundColor: Colors.red, // 这里设成你需要的目标颜色
),

方案2：强制设置状态栏颜色 #

如果方案1没生效，可能是Theme配置或其他样式覆盖了默认行为，这时候可以显式同步状态栏和AppBar的颜色，同时调整状态栏图标的亮度（避免颜色太接近导致看不清）：

appBar: AppBar(
  backgroundColor: Colors.red,
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarColor: Colors.red, // 和AppBar背景色完全一致
    statusBarIconBrightness: Brightness.light, // 背景为深色时用浅色图标，背景为浅色则设为Brightness.dark
  ),
),

方案3：全局统一配置（适合全App风格一致的场景） #

如果整个App的AppBar和状态栏都要统一颜色，直接在MaterialApp的Theme里配置，不用每个页面单独写：

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.red,
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.red,
        statusBarIconBrightness: Brightness.light,
      ),
    ),
  ),
  home: YourHomePage(),
)

之前你的代码没生效，大概率是因为没设置AppBar的backgroundColor，或者当前的Theme配置优先级更高，覆盖了你单独设置的systemOverlayStyle。

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