Flutter Widget 之ShaderMask

ShaderMask是Flutter的隐藏宝石之一。 ShaderMask可让您将着色器应用于树中的一个或多个widget。 着色器是非常灵活的。

在Flutter中，我们可以使用它们将渐变应用于widget。 我们也可以使用它们来应用图像。

要将着色器应用于widget，请将窗口widget包装在ShaderMask中，并向ShaderMask提供您要应用的着色器。

ShaderMask(
    shaderCallback: (rect) {
        ...
        return shader;
    },
    child: Container(),
),

如何创建着色器？ 幸运的是，Flutter的渐变类有一个方便createShader方法来完成此任务。

LinearGradient(...).createShader(rec);

让我们看一个很酷的效果，并对文本施加一些火焰。将文本包装在ShaderMask中，并为其指定RadialGradient。并为渐变提供一些好的火焰值。

ShaderMask(
    shaderCallback: (bounds) => RadialGradient(
        center: Alignment.topLeft,
        radius: 1.0,
        color: [
            Colors.yellow,
            Colors.deepOrange,
        ],
        tileMode: TileMode.mirror,
    ).createShader(bounds),
    child: const Text(
        'Burning Text!',
        style: TextStyle(color: Colors.white),
    ),
),

燃烧的文字！

着色器可以实现很多炫酷的效果。

如果想了解有关ShaderMask的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址