Flutter blend/mask 堆栈中另一个小部件下的多个小部件

Question

我正在尝试将多个小部件混合到堆栈中的特定小部件下。例如，在这个堆栈中...

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

...颜色过滤器将应用于文本形状的容器。

上面的代码产生这个：

我正在尝试实现与此类似的东西：

在这种情况下，文本会根据特定的混合模式（例如差异、排除、乘法、除法）更改下面小部件的颜色。

stack overflow 上的另一位用户问了一个 （未回答），这与我正在寻找的两个小部件相互混合的情况类似。

是否可以使用 Flutter 实现类似的效果（使用 CustomPainter 或其他方式）？大多数更改小部件颜色和属性的小部件只会影响它们的 children（ColorFiltered、ShaderMask），而我能想到的唯一会影响 Stack 中位于其下的小部件的小部件是 BackdropFilter。

它可以在任何小部件之间工作吗？

Answer 1

我们必须实现类似的东西。在渐变上具有 ColorBurn 混合遮罩的图像。无论我们在网上尝试了多少建议的解决方案，我们都无法实现在 Adob​​eXD 上获得的相同结果。所以，最后我们不得不使用 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，这让我们得到了想要的结果。