ShaderMask给widget添加一个遮罩

3,823 阅读1分钟

先上效果图

先上效果图

上面是对一张带有透明背景的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的各种属性的效果如下:

上图链接