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

194 Views Asked by At

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 :

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

 ),
1

There are 1 best solutions below

0
Ozan Taskiran On

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.

enter image description here