Flutter blend/mask multiple widgets under another widget in a stack

Question

I'm trying to blend multiple widgets under a specific widget in a Stack. For example, in this Stack...

        Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('images/desert.jpg'))),
              ),
              Center(
                  child: Text('Hello, World',
                      style: TextStyle(fontSize: 40, color: Colors.white)))
            ],
          ),

...a color filter would be applied to the Container in the shape of the Text.

The above code produces this:

I'm trying to achieve something similar to this:

In this case, the Text changes the color of the widgets below based on a specific BlendMode (ex. difference, exclude, multiply, divide).

Another user on stack overflow asked a question (unanswered) which is similar to what I'm looking for where two widgets are blended into each other.

Is it possible to achieve a similar effect using Flutter (using CustomPainter or otherwise)? Most widgets that alter the color and properties of widgets only affect their children (ColorFiltered, ShaderMask) and the only widget I can think of that affects the widgets under it in a Stack is the BackdropFilter.

And can it work between any widget?

Solution

We had to implement something similar. An image with a ColorBurn blend mask over a gradient. No matter how much we tried the suggested solutions on the net we could not accomplish the same result we got on AdobeXD. So, in the end we had to use the adobe_xd plugin and see how it translates the design into Flutter. It turned out that it used a BlendMask which was not in Flutter, but we could found it here, and which got us the desired result.

Comments

[Wilson Wilson]

Check out my answer to a really similar question here: stackoverflow.com/questions/62620579/… . The result I gained is pretty cool and it works for all widgets.