Flutter Web应用在Google Chrome中半透明图片透明度失效问题

问题场景 #

• 异常表现：构建后的Flutter Web应用仅在Google Chrome浏览器中出现半透明图片透明效果渲染异常，图片本应透明的白色区域显示为不透明白色，Safari浏览器无该问题，开发设备为M1芯片MacBook Pro。
• 复现代码：

void main(List<String> args) {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyPage(),
  ));
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Image.asset('images/test/circle_gradient.png'),
      ),
    );
  }
}

• Chrome下异常显示效果：
  
• 原始带透明通道图片资源：
  
• 问题环境版本信息：

Flutter 3.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision fb57da5f94 (5 weeks ago) • 2022-05-19 15:50:29 -0700
Engine • revision caaafc5604
Tools • Dart 2.17.1 • DevTools 2.12.2

问题产生原因 #

该问题是Flutter 3.0.1版本Web端Canvaskit渲染器的已知Bug，和M1芯片设备无直接关联：

• Flutter Web提供两种渲染模式：debug模式默认使用HTML渲染器，release/profile模式默认优先启用Canvaskit渲染器。前一天开发运行正常是因为debug模式走HTML渲染器不会触发Bug，当日执行构建如果是release模式，会自动切换到Canvaskit渲染器触发异常。
• 该版本Canvaskit在解析带预乘Alpha通道的半透明渐变PNG时，会错误丢弃半透明区域的Alpha通道值，把原本和透明通道预乘计算的白色基色直接作为不透明像素渲染，最终出现透明区域变实白的效果。
• Safari浏览器对Canvaskit部分特性支持度不足，Flutter Web在Safari环境下会自动回退到HTML渲染器，因此不会复现该问题。

可行修复方案 #

按推荐优先级排序：

1. 升级Flutter稳定版（最推荐）
   该透明通道渲染Bug在Flutter 3.0.5及后续3.x稳定版本、3.3+LTS版本中均已官方修复，升级后无需修改业务代码、无需调整渲染配置即可正常显示。执行以下命令完成升级：

   flutter upgrade
   

   升级完成后执行flutter doctor确认环境依赖正常，重新构建应用即可。
2. 临时指定HTML渲染器构建（快速修复）
   如果暂时无法升级Flutter版本，可以在构建时强制指定使用HTML渲染器，直接规避Canvaskit的Bug，构建命令如下：

   flutter build web --web-renderer html
   

   该方案的缺点是HTML渲染器的跨端渲染一致性、复杂图形绘制性能略逊于Canvaskit，适合临时紧急上线场景。
3. 图片资源预处理（应急方案，不推荐）
   如果既不能升级版本也不能切换渲染器，可以将出问题的半透明PNG导出为非预乘Alpha格式，或者给图片边缘添加1px的完全透明像素，绕过Canvaskit的像素解析逻辑。该方案需要逐个处理异常图片，后续维护成本高，仅作应急使用。

内容的提问来源于stack exchange，提问作者anonymous-dev