Home > Software engineering >  How to achieve Text masking background in Flutter?
How to achieve Text masking background in Flutter?

Time:07-31

example of desired behaviour

How can I achieve this effect in Flutter programmatically? I've tried ShaderMask but didn't find the right tool yet.

Blue background in my case is a ClipPath on a Container. Both, Text and Container are in the Stack, so the text is Positioned

CodePudding user response:

So the solution is quite simple: place two widgets in a Stack. At the very bottom is Text with blue color, and on the top goes ClipPath with white color Text as its child (both Positioned exactly the same).

The tricky thing is, to position white text inside ClipPath the same way, you'll need to wrap this text in another Stack and Positioned.

  • Related