I have linear progress indicators but i want add some "life" to them by adding gradient white color going from left to right and repeat, just like the following image :
Linear Progress indicator with light effect
My Progress indicators :
they're animated to fill from left to right and stop, but i want the white color to keep moving left to right.
Progress Indicator Code :
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) ,
),
)
Thanks
I haven't tried anything yet since i couldn't find any resource about this.
UPDATE:
I've accomplished this but the shimmer doesnt stop at the end of progress indicator, it keeps going to the end of the tile (right)
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),
),
),
This looks like a shimmer effect, here is an offical example from Flutter:
https://docs.flutter.dev/cookbook/effects/shimmer-loading?gclid=Cj0KCQjwmvSoBhDOARIsAK6aV7gKXy-QFjojlaGW2MA8RJUEBlBcAc9dQsPXsiZh_eO04fKxA4Lu_G4aAu2ZEALw_wcB&gclsrc=aw.ds
There is also a package for this: https://pub.dev/packages/shimmer and as you can see in the example it nearly does what you want, just in grey color.