FLUTTER | Custom Circular Progress Indicator

Question

How can I make a custom circular progress indicator like the ones in the below image in Flutter? The out of box one does not allow adding text in the center.

Screenshot of Example

try to create your own , follow cogitas.net/custom-loading-animation-flutter — Shyju M
– Shyju M, Commented May 22, 2018 at 12:13
This shows a basic with animations, I am actually confused at the part at how to display the progress. Other than that I just have to put circle shapes in a stack widget and I will get a circle bar — Musa Usman
– Musa Usman, Commented May 22, 2018 at 12:19

Amir Hossein Qasemi Moqaddam · Accepted Answer · 2018-05-22 13:25:45Z

4

I think you have two ways.

first put CircularProgressIndicator and Text widgets into Stack and place them as you want(Text in the center and CircularProgressIndicator cover all stack space). Stack widget is key point here for you to understand...

the second way and more flexible way is to this action with CustomPaint Widget. this link will help you to achieve the goal... https://medium.com/@NPKompleet/creating-an-analog-clock-in-flutter-i-68def107d9f4

edited May 22, 2018 at 13:25

answered May 22, 2018 at 13:20

Amir Hossein Qasemi Moqaddam

1621 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tenhobi Over a year ago

Also take a look at youtube.com/watch?v=svxUUz5mi9s for ideas how to do custom painting.

Richard Heap Over a year ago

Also, this answer stackoverflow.com/questions/45130497/…

Musa Usman Over a year ago

I tried using the stack widget but the amounts I have are too big and are escaping the circles, any way I can increase the size of the indcators

Collectives™ on Stack Overflow

FLUTTER | Custom Circular Progress Indicator

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related