How can we show custom progress indicator progress as per dynamic data in flutter?

Question

So, I want to add circle progress indicator around this image. and that progress indicator shows progress as per dynamic value. I mean the progress is dynamic not fixed. So, How can we do that ?

Answer 1

You can use Percent Indicator package to achieve dynamic loader based on your content.

For Example :

// Using ValueNotifier to update whenever the value of the progress changed
    final ValueNotifier<double?> completionValue = ValueNotifier(null);

// Call this function on where you are updating the progress value 
    void _updateProgressUI({
        required int totalFiles,
        required int totalSuccess,
      }) {
//Update completionValue value 
        completionValue.value = totalSuccess / totalFiles;
      }

// Use this widget on you screen to show the progress indicator 

Container(
              padding: EdgeInsets.symmetric(horizontal: ,),
              child: ValueListenableBuilder<double?>(
                valueListenable: completionValue,
                builder: (_, completionValue, __) {
                  return CircularPercentIndicator(
                    lineHeight: 16,
                    progressColor: your_color,
                    backgroundColor: your_color,
                    percent: completionValue ?? 0,
                    animationDuration: 1000,
                    animateFromLastPercent: true,
                    animation: true,
                    linearStrokeCap: LinearStrokeCap.roundAll,
                  );
                },
              ),
            )

Try to wrap the circular indicator out side your image.