How can I mask a text with image in Flutter?

Question

Hello does anyone know how i can mask a text and photo in flutter? I already have my image with text on the screen. For example: my text would be Lion and my photo of these lions are behind it. How can i make a mask like you can in photoshop?

See this photo for example:

Try this solution: https://stackoverflow.com/questions/62937882/is-there-a-way-to-show-image-inside-text-in-flutter — Abdelazeem Kuratem, Sep 20 '20 at 22:45

score 0 · Answer 1 · answered Nov 24 '20 at 18:14

I'm not sure this answers your question. It's a simple version of text masking but instead of masking an image this MIN REPRO EXAMPLE shows masking gradient colors:

 ShaderMask(
                        shaderCallback: (bounds) => RadialGradient(
                          colors: [
                            Colors.red,
                            Colors.green,
                          ],
                        ).createShader(bounds),
                        child: const Text('exclusive'),
                      ),

Unfortunately, as of writing ShaderMask is not supported yet for web online for iOS/Android. Check out more here: https://github.com/flutter/flutter/issues/44152

You may find these answers useful (just again they may not be supported on web yet I don't know about other solutions):

How can I mask a text with image in Flutter?

1 Answers1