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 中漸變的高階用法(3種)的文章就介紹到這了,更多相關Flutter 漸變內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！