FLUTTER | 自定义循环进度指示器

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

Answer 1

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