How to create Circular Progress Animation in Flutter app

How to create Circular Progress Animation in Flutter app

Flutter circular Animation

Learning Objective:

Create a intuitive UX using circular percentage animation in Flutter app which resembles a donut.

Use cases

  • To show multiple file upload progress
  • To show sales dashboard for week, month and year with multiple indicators

Flutter / Dart Plugin - percent_indicator

Install into your flutter app using the below command

1

flutter pub add percent_indicator

More on Pub.dev

Lets learn by example.

Circular Percentage Indicator Example

1
2
3
4
5
6
7
8
9
10
11

CircularPercentIndicator(
    radius: 100.0,  // Radius of the circle
    lineWidth: 13.0,  // Circle's stroke widget
    animation: true,        
    percent: 1.0,  // value ranges from 0.0 to 1.0
    header: const Text("Your Header Text"),    
    center: const Text("Your Center Text"),
    footer: const Text("Your Footer Text"),
    circularStrokeCap: CircularStrokeCap.round,
    progressColor: Colors.indigo,  //Progress color
)

Percent Indicator is a readily available flutter plugin ibrary that allows to display circular progress widgets with percentage. you can have static or dynamic percent with animation progress.

Dynamic Circular Percentage Indicator Example

1
2
3
4
5
6
7
8
9
10
11

CircularPercentIndicator(
    radius: 100.0,  // Radius of the circle
    lineWidth: 13.0,  // Circle's stroke widget
    animation: true,        
    percent: YOUR_PROGRESS_VARIABLE,  // value ranges from 0.0 to 1.0
    header: const Text("Your Header Text"),    
    center: const Text("Your Center Text"),
    footer: const Text("Your Footer Text"),
    circularStrokeCap: CircularStrokeCap.round,
    progressColor: Colors.indigo,  //Progress color
)

YOUR_DYNAMIC_VARIABLE - You can set this value using setState((){}) anywhere in your page workflow within the range from 0.0 to 1.0.

For example to show upload progress,

1
2
3
4
5

totalsize = 100;
bytestransferred = 50;
setState((){
    YOUR_PROGRESS_VARIABLE = bytestransferred/totalsize; // i.e 0.5
})

comments powered by Disqus