使用 Flutter LinearGradient-阿里云开发者社区

使用 Flutter LinearGradient

2022-12-27 351

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用 Flutter LinearGradient

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,
             ],
            ) 
          ),
 )