Flutter中如何让状态栏颜色与渐变容器颜色保持完全一致

问题原因 #

这个问题确实是渐变色彩导致的。安卓/iOS系统原生的状态栏仅支持设置纯色背景，本身不支持渐变渲染效果，所以你即便给状态栏设置渐变中的某一个色值，也无法和下方整个线性渐变的容器实现无缝衔接，自然会出现明显色差。

解决方案 #

只需要将状态栏设为完全透明，让页面的渐变背景延伸到状态栏区域即可，操作步骤如下：

• 第一步：导入services依赖包，在页面初始化/build阶段将状态栏设置为全透明，同时根据你的渐变背景明暗调整状态栏图标文字的亮度

import 'package:flutter/services.dart';

// 放在build方法内，或者initState生命周期里
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  statusBarColor: Colors.transparent, // 状态栏设为透明
  // 如背景偏浅，可改成Brightness.dark让状态栏文字变成黑色
  statusBarIconBrightness: Brightness.light, 
  statusBarBrightness: Brightness.dark, // iOS端的状态栏亮度配置
));

• 第二步：给Scaffold添加extendBodyBehindAppBar: true属性，允许body内容延伸到状态栏区域
• 第三步：调整顶部容器的顶部内边距，把你当前写死的top:30改成获取系统状态栏高度，避免内容被状态栏遮挡：

padding: EdgeInsets.only(
  top: MediaQuery.of(context).padding.top, // 替换原来的30
  left: 30, 
  right: 30
),

修改完成后你页面的渐变容器就会自然填充状态栏位置，两者颜色就能完全保持一致了。

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