如何在Flutter中制作带有背景的抠图图标？

Question

我想在Flutter中使用内置的Flutter小部件实现以下效果，而无需使用具有透明性的PNG图像。

我正在尝试使用backgroundBlendingMode，但没有成功。

我也可以考虑使用自定义绘画工具绘制圆形和内部十字形，但是理想情况下，我想使用任何Icon或任何其他Widget来剪切背景。

我还偶然发现了一种叫做CustomClipper的东西。是要走的路吗？

假设我们有以下小部件：

  return Stack(
    children: <Widget>[
      SizedBox(
        height: 44,
        width: 44,
        child: Image.network(
          'https://images.pexels.com/photos/1295138/pexels-photo-1295138.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
          fit: BoxFit.cover,
        ),
      ),
      Positioned(
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        child: Icon(
          Icons.close,
          color: Colors.black,
        ),
      ),
    ],
  );

可以from pexels拍摄示例图像。

Answer 1

好的，所以我在this question中找到了SO的答案。

看来正确的关键字是cutout。

所以我的解决方案非常简单，如下所示：

ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: Cutout(
        color: Colors.white,
        child: Icon(
        Icons.close,
        color: Colors.white,
        ),
    ),
),

然后使用ShaderMask剪切器：

class Cutout extends StatelessWidget {
  const Cutout({
    Key key,
    @required this.color,
    @required this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.srcOut,
      shaderCallback: (bounds) =>
          LinearGradient(colors: [color], stops: [0.0]).createShader(bounds),
      child: child,
    );
  }
}