How to make cutout icon with background in Flutter?

Question

I'd like to achieve following effect in Flutter with built in Flutter widgets without using PNG image with transparency.

I was trying to experiment with backgroundBlendingMode but without success.

I can also think of using custom painter to draw circle and inner cross, but ideally I would like to use any Icon or any other Widget to cut the background.

I also stumbled upon something called CustomClipper. Is it the way to go?

Let's say that we have following widget:

  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,
        ),
      ),
    ],
  );

Sample image can be taken from pexels.

Answer 1

Ok, so I found the answer on SO in this question.

It appears that the proper keyword is cutout.

So my solution is really simple and looks like follows:

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

And the clipper using 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,
    );
  }
}