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?

Answer 1

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),
    ),
  ]
);

Answer 2

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,
              ),