1

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

Musa Usman
  • 691
  • 4
  • 10
  • 21
  • try to create your own , follow http://cogitas.net/custom-loading-animation-flutter/ – Shyju M May 22 '18 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 May 22 '18 at 12:19

1 Answers1

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

Amir Hossein Qasemi Moqaddam
  • 152
  • 1
  • 6
  • Also take a look at https://www.youtube.com/watch?v=svxUUz5mi9s for ideas how to do custom painting. – tenhobi May 22 '18 at 13:25
  • 1
    Also, this answer https://stackoverflow.com/questions/45130497/creating-a-custom-clock-widget-in-flutter/45133660#45133660 – Richard Heap May 22 '18 at 14:06
  • 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 – Musa Usman May 22 '18 at 15:00