Flutter 3.7.1升级后Web端ColorFilter实现隐形图片失效问题

原因分析 #

Flutter 3.7.1版本对Chrome Web端的Skia渲染逻辑做了调整，其中BlendMode.modulate与全透明色组合的处理逻辑发生了变化。
原本modulate模式会将源像素（全白图片RGBA为(255,255,255,255)）和滤镜色（0x00000000即(0,0,0,0)）的每个通道分别相乘，最终得到全透明像素。但新版本的Chrome Web Skia实现中，这种组合的处理逻辑出现偏差，导致颜色滤镜未正确生效，原白色图片被保留。

可行解决方案 #

• 替换混合模式为BlendMode.clear，直接清除绘制区域：

static final Paint invisiblePaint = Paint()..blendMode = BlendMode.clear;

• 调整颜色滤镜的混合模式为BlendMode.srcIn，确保透明色完全覆盖源图片：

static final Paint invisiblePaint = Paint()
    ..colorFilter = const ColorFilter.mode(Color(0x00000000), BlendMode.srcIn);

• 若场景允许，也可直接通过条件判断跳过canvas.drawImage调用，避免不必要的绘制操作。

内容的提问来源于stack exchange，提问作者Going Bananas