flutterprogress-barprogressdialogprogress-indicator

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


enter image description here

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 ?


Solution

  • 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.