Flutter LinearGradient线性渐变安卓模拟器过渡生硬问题求助

问题原因 #

该问题是安卓与iOS平台底层渐变渲染的颜色空间差异导致的：安卓默认使用RGB线性空间计算渐变过渡，低色域下很容易出现色带、过渡生硬的问题；iOS默认使用sRGB色域渲染渐变，过渡自然平滑。

解决方案 #

方案1：指定渐变颜色空间（Flutter 3.0+ 推荐） #

直接给LinearGradient设置colorSpace参数为ColorSpace.sRGB，强制使用sRGB色域计算过渡色，代码修改后如下：

gradient: LinearGradient(
  colors: [Color(0xFF0f1129), Color(0xFF213259)],
  begin: Alignment.bottomCenter,
  end: Alignment.topCenter,
  stops: [0.0, 1.0],
  tileMode: TileMode.clamp,
  // 新增以下参数
  colorSpace: ColorSpace.sRGB,
),

注意把原代码里多余的enter code here片段删除。

方案2：手动插入中间过渡色（兼容所有Flutter版本） #

如果使用的Flutter版本低于3.0不支持colorSpace参数，可以在两个渐变颜色之间插入2-3个计算得到的中间过渡色，增加色阶数量消除色带：

gradient: LinearGradient(
  // 插入中间过渡色
  colors: [
    Color(0xFF0f1129),
    Color(0xFF141935),
    Color(0xFF1A2547),
    Color(0xFF213259),
  ],
  begin: Alignment.bottomCenter,
  end: Alignment.topCenter,
  // 对应调整stops的位置
  stops: [0.0, 0.3, 0.6, 1.0],
  tileMode: TileMode.clamp,
),

方案3：开启安卓硬件加速 #

如果上述方案效果不明显，可以检查安卓项目配置是否开启硬件加速，打开android/app/src/main/AndroidManifest.xml，在application标签中添加配置：

<application
  ...
  android:hardwareAccelerated="true"
  ...>

内容的提问来源于stack exchange，提问作者Serkan Ağca