Flutter 中渐变的高级用法_app

概述Flutter 中渐变有三种： LinearGradient：线性渐变 RadialGradient：放射状渐变 SweepGradient：扇形渐变看下原图，下面的渐变都是在此图基础上完成。 Li

Flutter 中渐变有三种：

linearGradIEnt：线性渐变RadialGradIEnt：放射状渐变SweepGradIEnt：扇形渐变

看下原图，下面的渐变都是在此图基础上完成。

linearGradIEnt

给一张图片添加从上到下的线性渐变：

ShaderMask(  shadercallback: (Rect bounds) {    return linearGradIEnt(      begin: Alignment.topCenter,end: Alignment.bottomCenter,colors: [colors.red,colors.blue,colors.green],).createShader(bounds);  },blendMode: BlendMode.color,child: Image.asset(    'assets/images/b.jpg',fit: BoxFit.cover,),)

begin 和 end 表示渐变的方向，上面设置的方向是从顶部中间到底部中间。

color 表示渐变的颜色。

设置各个渐变色的结束点：

color color = colors.orange;return ShaderMask(  shadercallback: (Rect bounds) {    return linearGradIEnt(        begin: Alignment.topCenter,colors: [color,color,colors.transparent,color],stops: [0,.4,.41,.6,.61,1]    ).createShader(bounds);  },);

stops 的个数要对应 color。

由于中间设置的渐变色为透明，所以中间是原图。

RadialGradIEnt

RadialGradIEnt 是放射状渐变。

ShaderMask(      shadercallback: (Rect bounds) {        return RadialGradIEnt(          radius: .5,colors: <color>[colors.red,colors.blue],).createShader(bounds);      },child: Image.asset(        'assets/images/b.jpg',)

实现中间显示圆形原图，其他地方有灰色蒙板：

ShaderMask(  shadercallback: (Rect bounds) {    return RadialGradIEnt(      radius: .6,colors: <color>[        colors.transparent,colors.grey.withOpacity(.7),colors.grey.withOpacity(.7)      ],.5,1],blendMode: BlendMode.srcAtop,)

SweepGradIEnt

SweepGradIEnt 扇形渐变效果。

ShaderMask(  shadercallback: (Rect bounds) {    return SweepGradIEnt(      colors: <color>[        colors.red,colors.blue      ],)

startAngle 和 endAngle 表示开始和结束角度。

绘制渐变圆环：

Container(        wIDth: 200,height: 200,child: CustomPaint(          painter: _CircleProgresspaint(.5),)class _CircleProgresspaint extends CustomPainter {  final double progress;  _CircleProgresspaint(this.progress);  Paint _paint = Paint()    ..style = PaintingStyle.stroke    ..strokeWIDth = 20;  @overrIDe  voID paint(Canvas canvas,Size size) {    _paint.shader = ui.GradIEnt.sweep(        Offset(size.wIDth / 2,size.height / 2),[colors.red,colors.yellow]);    canvas.drawArc(        Rect.fromLTWH(0,size.wIDth,size.height),pi*2,false,_paint);  }  @overrIDe  bool shouldRepaint(CustomPainter oldDelegate) {    return true;  }}

除了图片，可以给任何组件加入渐变效果，比如文字：

ShaderMask(  shadercallback: (Rect bounds) {    return linearGradIEnt(      colors: <color>[colors.blue,colors.red],tileMode: TileMode.mirror,child: Center(    child: Text(      '老孟，一枚有态度的程序员',style: TextStyle(FontSize: 24),)

交流

老孟Flutter博客地址（330个控件用法）：http://laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：