Flutter 混合/屏蔽堆栈中另一个小部件下的多个小部件

Question

我正在尝试在 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)))
            ],
          ),

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

上面的代码产生这个：

我正在尝试实现与此类似的目标：

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

堆栈溢出的另一个用户提出了一个问题（未回答），这类似于我正在寻找的两个小部件相互混合的问题。

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

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

Answer 1

我们必须实现类似的东西。 在渐变上带有ColorBurn混合蒙版的图像。 无论我们在网络上尝试了多少建议的解决方案，我们都无法获得在 Adob​​eXD 上获得的相同结果。 所以，最后我们不得不使用adobe_xd插件，看看它是如何将设计转化为 Flutter 的。 事实证明，它使用了BlendMask中没有的BlendMask ，但我们可以在这里找到它，并得到了我们想要的结果。