Flutter如何将任意Widget转为灰度？透明区域变灰问题如何解决？

首先明确：可以实现任意Flutter Widget的全局灰度效果，你遇到的透明区域变为不透明灰色的问题是混合模式选择错误导致的。

问题原因 #

你使用的BlendMode.saturation混合模式会将源色（你传入的不透明Colors.grey）的饱和度叠加到子Widget上，该模式下会覆盖子Widget原本的alpha透明通道取值，因此原本完全透明的区域会被填充为不透明灰色。

正确实现方案 #

使用标准灰度变换矩阵构造ColorFilter，可以完整保留子Widget原有的透明通道：

ColorFiltered(
  colorFilter: const ColorFilter.matrix(<double>[
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0,      0,      0,      1, 0,
  ]),
  child: child,
)

上述矩阵是基于人眼对RGB三色的敏感度计算的标准灰度转换规则，第四行第四位的1表示完全保留子Widget原有的透明度，不会修改透明区域的展示效果。

如果需要调整灰度深浅，可按需调整矩阵前三行的权重系数，不会影响透明通道的表现。

内容的提问来源于stack exchange，提问作者A.A