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,end: Alignment.bottomCenter,colors: [color,color,Colors.transparent,Colors.transparent,color,color],stops: [0,.4,.41,.6,.61,1]).createShader(bounds);},blendMode: BlendMode.color,child: Image.asset('assets/images/b.jpg',fit: BoxFit.cover,), );

stops 的個數要對應 color。

由于中間設置的漸變色為透明，所以中間是原圖。

RadialGradient

RadialGradient 是放射狀漸變。

ShaderMask(shaderCallback: (Rect bounds) {return RadialGradient(radius: .5,colors: <Color>[Colors.red, Colors.blue],).createShader(bounds);},blendMode: BlendMode.color,child: Image.asset('assets/images/b.jpg',fit: BoxFit.cover,),)

實現中間顯示圓形原圖，其他地方有灰色蒙板：

ShaderMask(shaderCallback: (Rect bounds) {return RadialGradient(radius: .6,colors: <Color>[Colors.transparent,Colors.transparent,Colors.grey.withOpacity(.7),Colors.grey.withOpacity(.7)],stops: [0, .5, .5, 1],).createShader(bounds);},blendMode: BlendMode.srcATop,child: Image.asset('assets/images/b.jpg',fit: BoxFit.cover,), )

SweepGradient

SweepGradient 扇形漸變效果。

ShaderMask(shaderCallback: (Rect bounds) {return SweepGradient(colors: <Color>[Colors.red,Colors.blue],).createShader(bounds);},child: Image.asset('assets/images/b.jpg',fit: BoxFit.cover,), )

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;@overridevoid 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, 0, size.width, size.height), 0, pi*2, false, _paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;} }

除了圖片，可以給任何組件加入漸變效果，比如文字：

ShaderMask(shaderCallback: (Rect bounds) {return LinearGradient(colors: <Color>[Colors.blue, Colors.red],tileMode: TileMode.mirror,).createShader(bounds);},blendMode: BlendMode.srcATop,child: Center(child: Text('老孟，一枚有態度的程序員',style: TextStyle(fontSize: 24),),), )

交流

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

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】

總結

以上是生活随笔為你收集整理的圆形渐变shader_Flutter 中渐变的高级用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。