How can I mask a text with image in Flutter?

user_14296782 0
Viewed 695

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: Text and Photo Mask

dart flutter masking image text
1 Answers

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):

user_72008750
Related