How to add rounded border to the CircularProgressIndicator in Flutter?

Question

I would like achieve the corners for the progress indicator as per above image.

Follicle

I found this package on pub.dev, check this out pub.dev/packages/percent_indicator – Funderburk

Answer 1

Adding rounded border to the LinearProgressIndicator can be done easily but it's not the same with CircularProgressIndicator as there is no support given in the flutter library yet.

This has been raised here and the solution given by the flutter team is here.

So here we can have a clean and custom solution for this issue i.e just add the ..strokeCap = StrokeCap.round to the default CircularProgressIndicator class.

Copy the source code for classes CircularProgressIndicator and ProgressIndicator to a separate file into your code repository and add the strokeCap value as per your requirement in _CircularProgressIndicatorPainter.

There you go. you have the indicator as expected in the above image.

Follicle

Answer 2

Since Flutter 3.13, this can be done with the strokeCap attribute included in the CircularProgressIndicator widget:

CircularProgressIndicator(
    strokeCap: StrokeCap.round,
);

Toxoplasmosis

Answer 3

There are some packages but if you want to do it manually, take a look in this drive-link. I did it manually. You can change it as you want to.

Shikari

I guess it is real hard to use words like are, you so you have to use shortcuts as r, u etc... – Nephron

Answer 4

You can make use of this curved_progress_bar package. Or if you want to design it manually then you can look into the source code of the package here curved_progress_bar - GitHub

Gratt