在前段時間寫代碼的時候，碰到個需求：給這個文字加上漸變色！
當時我心裡隻有一張圖：
先看一下效果圖：
嘿，你别說還挺好看。
話不多說，了解一下是如何實作的吧。
請出今天的主角：
ShaderMask
。
官方介紹
按照慣例，我們還是先來看一下官方的介紹：
A widget that applies a mask generated by a Shader[1] to its child.
一個小部件，将由着色器生成的遮罩應用于其子級。
官方示例
知道了
ShaderMask
的作用之後我們就接着來看一下官方的示例：
ShaderMask( shaderCallback: (Rect bounds) { return RadialGradient( center: Alignment.topLeft, radius: 1.0, colors: <Color>[Colors.yellow, Colors.deepOrange.shade900], tileMode: TileMode.mirror, ).createShader(bounds); }, child: const Text('I’m burning the memories'),) 複制
然而，當我們把這段代碼複制到編輯器，運作後：
什麼也沒有發生，因為我們的字是黑色的！
改一下，改成白色：
這就是官方demo的例子，也是
ShaderMask
最基礎的用法，下面就來說一下進階的用法。
會動的漸變
先看一下效果：
其實這個和
ShaderMask
本身沒有什麼關系了，是「着色器」和「動畫」的合作後，最後遮罩在一個 Widget 上所達到了現在的效果。
關鍵代碼如下：
shaderCallback: (Rect bounds) { return LinearGradient(colors: _colors, stops: [ 0 + _gradientValue * 0.2, _gradientValue * 0.8, 1 - _gradientValue * 0.3 ]).createShader(bounds);} 複制
最重要的是
stops
參數，他規定了漸變的顔色所在區域，值從0到1.
這樣再加上動畫，就完成了一個會動的漸變色這樣的效果。
萬物皆可 ShaderMask
前面我隻是用了一個文本來示範
ShaderMask
的基礎用法，然而
ShaderMask
的 child 可以是任意 Widget。
比如：
結語
ShaderMask
可以很友善的為我們添加顔色，但是我們需要注意其中一點：
shader
是處于下層的，
child
處于上層，也就是說，是我們的
child
蓋住了
shader
。
我們可以通過
blendMode
來控制他倆重疊部分的效果，如下：
圖來自張風捷特烈[2]
References
[1]
Shader: https://api.flutter.dev/flutter/dart-ui/Shader-class.html
[2]
張風捷特烈: https://juejin.im/user/5b42c0656fb9a04fe727eb37