在前段時間寫程式碼的時候，碰到個需求：給這個文字加上漸變色！
當時我心裡只有一張圖：
先看一下效果圖：
嘿，你別說還挺好看。
話不多說，瞭解一下是如何實現的吧。
請出今天的主角：ShaderMask。
官方介紹
按照慣例，我們還是先來看一下官方的介紹：
A widget that applies a mask generated by a Shader 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 來控制他倆重疊部分的效果，如下：
圖來自張風捷特烈