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

Question

我有线性进度指示器，但我想通过添加从左到右的渐变白色并重复来为其添加一些“生命”，如下图所示：

我的进度指标：

它们的动画是从左到右填充并停止，但我希望白色继续从左到右移动。

进度指示器代码：

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

谢谢

我还没有尝试过任何东西，因为我找不到任何关于此的资源。

Answer 1

这看起来像闪光效果，这是 Flutter 的官方示例：

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

还有一个用于此目的的包：https://pub.dev/packages/shimmer，正如您在示例中所看到的，它几乎可以满足您的需求，只是呈灰色。