How to create circular progress bar like below image in flutter-CodePudding

I want to create this circular progress bar with animation and working on percentage

CodePudding user response：

Import this

simple_circular_progress_bar:

SimpleCircularProgressBar(
              animationDuration: 10,
              valueNotifier: ValueNotifier(50),
              onGetText: (double value) {
                TextStyle centerTextStyle = TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.bold,
                );

                return Text(
                  'test data',
                  style: centerTextStyle,
                );
              },
              maxValue: 100,
              mergeMode: true,
              backStrokeWidth: 8,
              progressStrokeWidth: 8,
              backColor: Colors.grey,
              progressColors: [
                Colors.green,
              ],
            ),

CodePudding user response：

You can either achieve this using CustomPaint to draw it yourself (recommended), or perhaps using a Stack to put 3 different-sized CircularProgressIndicators on top of each other.

It's not difficult to custom paint this: for each ring, you can first draw a grey circle as the background, then draw a colored arc path. You can round the ends by setting Paint()..strokeCap = StrokeCap.round.