ShaderMask给widget添加一个遮罩

先上效果图

上面是对一张带有透明背景的png图片做颜色渐变，原图如下：

直接上代码:

ShaderMask(
    child: Image.asset('images/spring.png'),
    shaderCallback: (rect) {
        return LinearGradient(
            colors: [
              Colors.greenAccent,
              Colors.deepPurpleAccent,
              Colors.redAccent,
            ],
            stops: [0, _controller.value, 1],
        ).createShader(rect);
    },
    blendMode: BlendMode.srcATop,
)
复制代码

核心是blendMode属性，用来确定shader和child之间重叠部分的显示效果。其中child是处于上层，shader是属于下层，BlendMode的各种属性的效果如下：

上图链接