flutterflutter-layoutflutter-animation

How to create a Text cutout in Flutter?

I am trying to create a Text Box where text colour should be transparent and if I change the colour of the background containter..the text colour should change too. For example, consider this image

enter image description here

Here, I have a stack with first element a container with colour= black because of which I want MY TEXT to be black too. I don't want to manually set the font-colour of the text every time I change the colour of the 1st container.. as I may plan to fill the container with an animation later and I want the same animation to run on the text also.

I tried setting the text foreground colour to transparent and background colour to orange but that did not help, the text also became orange and hence invisiable.

Solution

  • While looking out for more options, I found this really simple method to achieve what I wanted.

    ShaderMask(
          blendMode: BlendMode.srcOut,
          child: Text(
              text,
            ),
          shaderCallback: (bounds) =>
              LinearGradient(colors: [Colors.black], stops: [0.0])
                  .createShader(bounds),
        )