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.

Answer 2

Step 1: Create Dialog

showAlertDialog(BuildContext context){
      AlertDialog alert=AlertDialog(
        content: new Row(
            children: [
               CircularProgressIndicator(),
               Container(margin: EdgeInsets.only(left: 5),child:Text("Custom Widget" )),
            ],),
      );
      showDialog(barrierDismissible: false,
        context:context,
        builder:(BuildContext context){
          return alert;
        },
      );
    }

Step 2: Call it

showAlertDialog(context);

Step 3: Dismiss Dialog

Navigator.pop(context);

Answer 3

You can try syncfusion_flutter_gauges package.

Eg: https://flutter.syncfusion.com/#/radial-gauge/pointers/range-pointer

https://flutter.syncfusion.com/#/radial-gauge/pointer-animation/ease

Answer 4

Try to use this, i'hpe your problem will be solved!

SmartDialog.showLoading(builder: (context) {
            return Container(
              decoration: BoxDecoration(
                  color: BrandColors.kWhite,
                borderRadius: BorderRadius.circular(10)
              ),
              height: 150,
              width: 150,
              child: Lottie.asset(
                'assets/lottie/loading.json',
                // height: 50,
                // width: 100,
                repeat: false,
                reverse: false,
              ),
            );
              });

Output