Cut Out Text Effect In Flutter

Question

How Can I do a text cut into a box container that leaves the content under it seen?

Here's exactly what I mean:

As you can see the immage is seen under the text. How could I do this?

Answer 1

You could use a ShaderMask for that, which allows you to apply a shader to a widget, taking a Blend Mode into account. The Blend Mode is what we're interested in, so the Shader will be a simple color:

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

Here is an example render:

For your exact example image, the child should be a Text widget and you should also include this in a ClipRRect for the rounded corners (or you can figure out more optimal solutions using BoxDecoration if the performance impact of ClipRRect is an issue)

The advantage of this solution is that it works with any widget as a child and that it's a composable widget that you can pop in your layout.