How to add rounded border to the CircularProgressIndicator in Flutter?

Viewed 54

Image with rounded border to the CircularProgressIndicator

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

1 Answers

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.

Related