将 flutter widget 转为灰度

Question

是否可以将任意小部件变成灰度？我用了

ColorFiltered(
   colorFilter : ColorFilter.mode(
     Colors.grey,
     BlendMode.saturation,
   ),
   child : child,
);

但小部件的透明部分变成不透明的灰色

Answer 1

正如pskink所说，您可以简单地使用Flutter 文档ColorFilter.matrix中解释的内容：

灰度滤色镜（值基于滤镜效果规范）：

const ColorFilter greyscale = 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, ]);

代码

可以像这样使用：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const ColorFiltered(
      colorFilter: 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: FlutterLogo(size: 48),
    );
  }
}

截屏

我还放了基色版本进行比较：

您可以在 DartPad 上测试完整代码