提问人:sigma lab 提问时间:10/4/2023 最后编辑:sigma lab 更新时间:10/4/2023 访问量:79
如何在线性进度指示器的顶部过度添加移动光 - Flutter
How to add moving light overly on top of linear progress indicator - Flutter
问:
我有线性进度指示器,但我想通过添加从左到右的渐变白色并重复来为它们添加一些“生命”,就像下图一样:
我的进度指标:
它们被动画化为从左到右填充并停止,但我希望白色继续从左到右移动。
进度指示器代码:
child:ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(10)),
child: LinearPercentIndicator(
padding: EdgeInsets.zero,
width: 353.w,
animation: true,
lineHeight: 58.w,
animationDuration: 1500,
percent: percentage > 1 ? 1 : (percentage < 0? 0: percentage) ,
LinearStrokeCap.roundAll,
backgroundColor: kCasesTileBGColor,
progressColor: kBlue.withOpacity(0.9) ,
),
)
谢谢
我还没有尝试过任何东西,因为我找不到任何关于这个的资源。
更新:
我已经完成了这个任务,但微光并没有在进度指示器的末尾停止,而是一直到磁贴的末尾(右)
Shimmer.fromColors(
baseColor: kBlue.withOpacity(0.9),
highlightColor: kCasesTileBGColor,
child: LinearPercentIndicator(
padding: EdgeInsets.zero,
width: 353.w,
animation: true,
lineHeight: 58.w,
animationDuration: 1500,
percent: percentage > 1 ? 1 : (percentage < 0? 0: percentage) ,
//center: Text("80.0%"),
//linearStrokeCap: LinearStrokeCap.roundAll,
backgroundColor: kCasesTileBGColor,
progressColor: kBlue.withOpacity(0.9) ,
//barRadius: Radius.circular(10),
),
),
答:
0赞
Ozan Taskiran
10/4/2023
#1
这看起来像一个微光效果,这是 Flutter 的一个官方示例:
还有一个包:https://pub.dev/packages/shimmer,正如您在示例中看到的那样,它几乎可以完成您想要的操作,只是灰色。
评论
shimmer effect