LinearGradient 是 2D 线性渐变
BoxDecration 使用 LinearGradient
const LinearGradient({ this.begin = Alignment.centerLeft, this.end = Alignment.centerRight, required super.colors, super.stops, this.tileMode = TileMode.clamp, super.transform, }); 复制代码
begin 和 end
begin，end 决定了渐变的起点和终点，是比例值，所以无论应用在多大尺寸的目标上都没有问题。默认是从左到右水平渐变。
BoxDecoration( gradient: LinearGradient( colors: <Color>[ Colors.blue, Colors.green ], tileMode: TileMode.decal, ), )); 复制代码
这就是默认的从左到右水平渐变的效果，不指定 begin,end时的默认值。其实 begin end,可以从任意位置开始
LinearGradient( begin: Alignment.center, colors: <Color>[ Colors.blue, Colors.green ], tileMode: TileMode.decal, ) 复制代码
这就是起点从中心开始的效果。
tileMode
我们注意到上面的例子中 tileMode: TileMode.decal 这是为了演示起点的效果。如果是默认值TileMode.clamp 效果是这样的，和 web 中的渐变效果一样。
tileMode 是一个枚举，还有两个值。TileMode.mirror 是镜像。
TileMode.repeated 是重复。
除了 decal 是严格只填充起点到终点的空间外，其它三个选项都会按策略填充空白区域。
stops
stops 是用来调整不同色值的临界点的。如果不指定 stops ，所有颜色平均分配位置。
LinearGradient( colors: <Color>[ Colors.blue, Colors.green, ], stops: [0.4,0.6], tileMode: TileMode.decal, ) 复制代码
本例中，本来 stops:[0.0,1.0]，现在把蓝与绿色的临界点向右移动 40%，造成 0%-40% 是纯蓝。40%-60% 之间是蓝色与縁色的渐变区域。
Custumpainter 使用 LinearGradient
绘制渐变矩形
class MyPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { var paint = Paint() ..shader = LinearGradient( colors: <Color>[ Colors.blue, Colors.green, ], stops: [0, 1], tileMode: TileMode.decal, ).createShader(Offset(0, 0) & size); canvas.drawRect(Rect.fromLTWH(0, 0, 200, 200), paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } } 复制代码
绘制渐变文字
ShaderMask( blendMode: BlendMode.srcATop, shaderCallback: (Rect bounds) { return LinearGradient( colors: <Color>[Colors.green, Colors.red], tileMode: TileMode.mirror, ).createShader(bounds); }, child: const Text( 'IAM17 flutter 天天更新' ), ) 复制代码
不用 ShaderMask 也可以
Text( 'Greetings, planet!', style: TextStyle( fontSize: 40, foreground: Paint() ..shader = ui.Gradient.linear( const Offset(0, 20), const Offset(150, 20), <Color>[ Colors.red, Colors.yellow, ], ) ), )
