How to create two level circular progress indicator?

Question

Following is what i want to achieve

I was having a look at the Circular Percent Indicator library but that does not provide this functionality

The following is achieve in native Android Development https://github.com/grmaciel/two-level-circular-progress-bar

but how to port it to Flutter?

score 2 · Accepted Answer · edited Mar 15 '21 at 06:08

2

You can achieve this effect by using a stack widget, it will allow you to place both indicators on an identical position which will get the effect of overlapping done :

Stack(
  children: <Widget>[
    CircularProgressIndicator(
      value: 0.8,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.purple),
    ),
    CircularProgressIndicator(
      value: 0.6,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
    ),
  ]
);

edited Mar 15 '21 at 06:08

Julian Rex

89
1
8

answered Feb 15 '19 at 12:20

Mazin Ibrahim

7,433
2
33
40

Thank you for your answer, but i want the same progress bar to have two colors as well as a different background color – Feb 15 '19 at 12:35
There's no easy path. – Mazin Ibrahim Feb 15 '19 at 12:38
I have find a Native Android Solution but not sure how to port it to Flutter https://github.com/grmaciel/two-level-circular-progress-bar – Feb 15 '19 at 12:39

score 1 · Answer 2 · answered Nov 25 '20 at 07:29

Try this, percent_indicator library,

        new CircularPercentIndicator(
                radius: 130.0,
                animation: true,
                animationDuration: 1200,
                lineWidth: 15.0,
                percent: 0.4,
                center: Center(
                       child: Icon(Icons.location_on),
                        ),
                circularStrokeCap: CircularStrokeCap.butt,
                backgroundColor: Colors.deepPurple,
                progressColor: Colors.green,
              ),

How to create two level circular progress indicator?

2 Answers2

Linked