Flutter文字渐变(一)--Text渐变

效果图

screenshot01

代码Github地址

简介

  原理其实很简单,就是利用Gradient创建Shader,再设置Paint的shader属性,最后传递到TextStyleforeground参数.控制好渐变的参数就可以实现比如Shimmer效果或者是歌词效果(后面的文章会说到).

代码实现

实现

  • 获取屏幕大小,这里只是用来设置渐变的范围用.所以也可以不获取然后自己填写.
1
Size size = MediaQuery.of(context).size;
  • 创建一个渐变效果,这里是用的线性渐变,也可以替换成RadialGradient或者SweepGradient.颜色我使用的是蓝色和绿色的强调色blueAccentgreenAccent.
    (:colors数组的长度要$\geq2$,只有一个颜色值也没啥意义并且会报错)
1
2
3
4
Gradient gradient = LinearGradient(colors: [
Colors.blueAccent,
Colors.greenAccent,
]);
  • 根据gradient创建shader,使用的createShader方法.createShader方法其实有两个参数,其中rect是必须要传递的,因为它指定了范围,而第二个参数textDirection是关于文字方向的,可以自己尝试一下,这里暂时用不到所以就只需要第一个,之后我可能会进行补充.
1
2
3
Shader shader = gradient.createShader(
Rect.fromLTWH(0, 0, size.width, size.height),
);
  • 最后给目标文本设置文本样式TextStyle,样式里面的前景foreground使用指定刚才创建的shaderPaint就行了.
    (:前景是foreground,不要设置成背景background了,设置成背景就不是文字会有效果了,而是Text占的区域背景色会有渐变效果)
1
2
3
4
5
6
7
Text(
'文字渐变效果',
style: TextStyle(
fontSize: 28.0,
foreground: Paint()..shader = shader,
),
)
  • 最后运行就可以看到效果.如果gradient,shader,paint没有必要动态创建或者不需要改变的话就不用放build里面每次都创建

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 获取屏幕大小,创建shader指定rect范围时需要
Size size = MediaQuery.of(context).size;
// 创建线性渐变,蓝色强调色到绿色强调色的渐变
// 这里的渐变效果是从左往右的线性渐变
Gradient gradient = LinearGradient(colors: [
Colors.blueAccent,
Colors.greenAccent,
]);
// 根据渐变创建shader
// 范围是从左上角(0,0),到右下角(size.width,size.height)全屏幕范围
Shader shader = gradient.createShader(
Rect.fromLTWH(0, 0, size.width, size.height),
);

return Scaffold(
body: Center(
child: Text(
'文字渐变效果',
style: TextStyle(
fontSize: 28.0,
// 创建一个新的Paint并指定shader
// 注意这里能复用的话还是不要动态创建了
foreground: Paint()..shader = shader,
),
),
),
);