欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈Flutter 中渐变的高级用法(3种)

程序员文章站 2022-11-23 11:19:20
flutter 中渐变有三种: lineargradient:线性渐变 radialgradient:放射状渐变 sweepgradient:扇形渐变看下原图,下面的渐变都是在此图基础上完成。l...

flutter 中渐变有三种:

  • lineargradient:线性渐变
  •  radialgradient:放射状渐变
  • sweepgradient:扇形渐变

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

浅谈Flutter 中渐变的高级用法(3种)

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

浅谈Flutter 中渐变的高级用法(3种)

beginend 表示渐变的方向,上面设置的方向是从顶部中间到底部中间。

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

浅谈Flutter 中渐变的高级用法(3种)

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

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

浅谈Flutter 中渐变的高级用法(3种)

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

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

浅谈Flutter 中渐变的高级用法(3种)

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

浅谈Flutter 中渐变的高级用法(3种)

startangleendangle 表示开始和结束角度。

绘制渐变圆环:

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, 0, size.width, size.height), 0, pi*2, false, _paint);
 }

 @override
 bool shouldrepaint(custompainter olddelegate) {
  return true;
 }
}

浅谈Flutter 中渐变的高级用法(3种)

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

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 中渐变的高级用法(3种)

到此这篇关于浅谈flutter 中渐变的高级用法(3种)的文章就介绍到这了,更多相关flutter 渐变内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

相关标签: Flutter 渐变