如何在线性进度指示器的顶部过度添加移动光 - Flutter

How to add moving light overly on top of linear progress indicator - Flutter

提问人:sigma lab 提问时间:10/4/2023 最后编辑:sigma lab 更新时间:10/4/2023 访问量:79

问:

我有线性进度指示器,但我想通过添加从左到右的渐变白色并重复来为它们添加一些“生命”,就像下图一样:

带灯光效果的线性进度指示器

我的进度指标:

我的进度指标

它们被动画化为从左到右填充并停止,但我希望白色继续从左到右移动。

进度指示器代码:

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赞 Aamil Silawat 10/4/2023
将其与 getwidget.dev/blog/flutter-progress-bar-indicator 一起使用shimmer effect
0赞 sigma lab 10/4/2023
@AamilSilawat您能否提供一个关于如何将微光效果与此小部件一起使用的最小工作示例
0赞 Clevino Alrin 10/4/2023
如果您不想使用 package => docs.flutter.dev/cookbook/effects/shimmer-loading,您可以从头开始尝试

答:

0赞 Ozan Taskiran 10/4/2023 #1

这看起来像一个微光效果,这是 Flutter 的一个官方示例:

https://docs.flutter.dev/cookbook/effects/shimmer-loading?gclid=Cj0KCQjwmvSoBhDOARIsAK6aV7gKXy-QFjojlaGW2MA8RJUEBlBcAc9dQsPXsiZh_eO04fKxA4Lu_G4aAu2ZEALw_wcB&gclsrc=aw.ds

还有一个包:https://pub.dev/packages/shimmer,正如您在示例中看到的那样,它几乎可以完成您想要的操作,只是灰色。

enter image description here