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

Posted 2023-03-23

【中文标题】如何在 Flutter 中制作带背景的抠图图标？

【英文标题】：How to make cutout icon with background in Flutter?

【发布时间】：2020-01-22 23:41:33

【问题描述】：

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

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

我也可以考虑使用自定义画家来绘制圆形和内十字，但理想情况下我想使用任何图标或任何其他小部件来切割背景。

我还偶然发现了一个名为 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。

【参考方案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,
    );
  

【讨论】：

我将如何做到这一点以使其更矩形，中间有切口