Flutter - Circle Avatar with Progress Bar-CodePudding

I am trying to achieve the below output.

I am not getting any ideas on how can I do this. This isn't a border. I want to change the values depending on how much the user has completed his profile. If you have any ideas please let me know.

CodePudding user response：

Use this library

percent_indicator: ^4.0.0

Here is example

CircularPercentIndicator(
                radius: 100.0,
                lineWidth: 10.0,
                percent: 0.2,
                center: const CircleAvatar(
                  radius: 45, // Image radius
                  backgroundImage: NetworkImage('https://resize.indiatvnews.com/en/resize/newbucket/715_-/2020/02/srk-1582818093.jpg'),
                ),
                progressColor: Colors.green,
              )

CodePudding user response：

The easiest way to do these is by using percent_indicator, this package get a widget and you can put your image in it(if it was not fit, try to use Stack).