Question 76296 in Flutter Question posted in
The official Flutter documentation can be found here.

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 ?

Tags:

3

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search