![](https://img-blog.csdnimg.cn/20200229195429969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

ShaderMask可以讓我們將Shader用於任何一個控制元件上，比如在Text上使用漸變就可以使用ShaderMask來實現：
```
ShaderMask(
      shaderCallback: (Rect bounds) {
        return RadialGradient(
          center: Alignment.topLeft,
          radius: 1.0,
          colors: <color>[Colors.yellow, Colors.deepOrange],
          tileMode: TileMode.mirror,
        ).createShader(bounds);
      },
      blendMode: BlendMode.srcATop,
      child: Text('老孟，一枚有態度的程式設計師',style: TextStyle(fontSize: 30),),
    )
```

效果：

![](https://img-blog.csdnimg.cn/20200228173958191.png)

`shaderCallback` 需要返回一個Shader物件，可以透過漸變相關類直接生成Shader：
```
RadialGradient(...).createShader(rect)
```
`blendMode`屬性是融合方式，child是目標影像(dst),Shader是源影像(src)，融合方式介紹：
- [英文官方介紹]( https://docs.flutter.io/flutter/dart-ui/BlendMode-class.html)
- [中文 不錯的翻譯](https://blog.csdn.net/chenlove1/article/details/84574237)

### 更多相關閱讀：

- [Flutter系列文章總覽](https://blog.csdn.net/mengks1987/article/details/84868953)
- [Flutter Widgets 之 Expanded和Flexible](https://mengqd.blog.csdn.net/article/details/104414251)
- [Flutter Widgets 之 AnimatedList ](https://blog.csdn.net/mengks1987/article/details/103689129)
- [Flutter Widgets 之 SliverAppBar](https://blog.csdn.net/mengks1987/article/details/104031790)

##### 如果這篇文章有幫助到您，希望您來個“贊”並關注我的公眾號，非常謝謝。
![](https://img-blog.csdnimg.cn/2020012208322494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9tZW5ncWQuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70)</color>

Flutter Widgets 之 ShaderMask

相關文章