Flutter Circular Progress Indicator Widget
Circular Progress Indicator is a material widget in flutter. A circular progress indicator informs the user that the application is busy by displaying a small animating circular icon. It blocks the user from interacting with the application when it is busy. Flutter provides a widget called CircularProgressIndicator which allows us to add a circular progress indicator to our application. It is used in instances such as downloading and uploading content, fetching data from api, processing data etc.
This tutorial shows you how to use Circular Progress Indicator in flutter. You will also learn how to customize & style the widget with different properties with example.
If you want to show linear progress bar instead, consider using Linear progress indicator widget.
There are two types of circular progress indicators :
- Determinate
- Indeterminate
Detreminate
Determinate progress indicator means we can determine the progress based on the value provided to it. The value indicates the amount of completion of the task that is going on. To create a determinate progress indicator, we should provide a non-null value to the value property of the circular progress indicator widget. The value should fall between 0.0 and 1.0.
Indeterminate
Indeterminate progress indicator means we cannot determine the progress. It just indicates that progress is happening but won’t show the amount of completion of the task which is going on. To create an indeterminate progress indicator set the value property of the widget to null or ignore using this property at all.
Creating Circular Progress Indicator
Flutter provides a class called CircularProgressIndicator. To create a circular progress indicator we have to call its constructor. There are no required properties for this widget so we can directly call the constructor.
Flutter CircularProgressIndicator Constructor :
CircularProgressIndicator(
{Key? key,
double? value,
Color? backgroundColor,
Color? color,
Animation<Color?>? valueColor,
double strokeWidth,
String? semanticsLabel,
String? semanticsValue}
)
Below is the basic example code to add circular progress indicator to our flutter application.
CircularProgressIndicator()
Flutter Circular Progress Indicator Properties
The properties of a circular progress indicator are :
- value
- backgroundColor
- color
- valueColor
- strokeWidth
Lets customize the circular progress indicator with the above mentioned properties and style it.
value
We will use this property to indicate the amount of completion of task that is currently running. It takes a value from 0 to 1 where 0 indicates start of task and 1 indicates completion of task.
Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top: 20),
child: CircularProgressIndicator(
value: 0.8,
)
)
Output :
valueColor
We will use this property to apply color to the value indicator. It takes material color as value.
Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top: 20),
child: CircularProgressIndicator(
value: 0.8,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.purple),
)
)
Output :
backgroundColor
We will use this property to change the background color of circular progress indicator. It takes material color as value.
Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top: 20),
child: CircularProgressIndicator(
backgroundColor: Colors.grey,
)
)
Output :
color
We will use this property to change the color of the indicator. It takes material color as value.
Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top: 20),
child: CircularProgressIndicator(
backgroundColor: Colors.grey,
color: Colors.purple,
)
)
Output :
strokeWidth
We will use this property to change the width of the stroke of the progress indicator. It takes double as value.
Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top: 20),
child: CircularProgressIndicator(
backgroundColor: Colors.grey,
color: Colors.purple,
strokeWidth: 10,
)
)
Output :
Flutter Circular Progress Indicator Example
Lets create an example which shows the use of CircularProgressIndicator widget in flutter. In this example we will display both determinate and indeterminate progress indicators. For determinate progress indicator we will display a button, pressing on which will show the progress.
We will create a variable value whose value is initially 0.
double value = 0;
We will assign this variable to value property of circular progress indicator.
CircularProgressIndicator(
backgroundColor: Colors.grey,
color: Colors.green,
strokeWidth: 5,
value: value,
),
Now we will create a function downloadData. Inside this function we will create new Timer.periodic and add 0.1 to the value variable every second inside the callback function of the timer. We will also update the state every time the callback function is invoked so that the UI gets updated with the progress. When the value becomes 1.0 we will cancel the timer.
void downloadData(){
new Timer.periodic(
Duration(seconds: 1),
(Timer timer){
setState(() {
if(value == 1) {
timer.cancel();
}
else {
value = value + 0.1;
}
});
}
);
}
Lets call the above function inside onPressed callback of an elevated button. Also assign 0 to value variable and update state so that the progress starts from 0 and the UI will also be updated with the value.
ElevatedButton(
child: Text("Download File"),
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.green
),
onPressed: ()
{
value = 0;
downloadData();
setState(() {
});
},
),
Complete Code:
Lets sum up all the code blocks above to complete our circular progress indicator example in flutter.
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main()
{
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Learning',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState()
{
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
double value = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Circular Progress Indicator"),
),
body: Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top: 20),
child: Column(
children:[
Container(
child: Text("Indeterminate Progress Indicator",style: TextStyle(fontSize: 18),),
margin: EdgeInsets.all(20),
),
Container(
margin: EdgeInsets.all(20),
child: CircularProgressIndicator(
backgroundColor: Colors.grey,
color: Colors.purple,
strokeWidth: 5,
),
),
Container(
child: Text("Determinate Progress Indicator",style: TextStyle(fontSize: 18)),
margin: EdgeInsets.all(20),
),
Container(
margin: EdgeInsets.all(20),
child: CircularProgressIndicator(
backgroundColor: Colors.grey,
color: Colors.green,
strokeWidth: 5,
value: value,
),
),
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
child: Text("Download File"),
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.green
),
onPressed: ()
{
value = 0;
downloadData();
setState(() {
});
},
),
)
]
)
)
);
}
void downloadData(){
new Timer.periodic(
Duration(seconds: 1),
(Timer timer){
setState(() {
if(value == 1) {
timer.cancel();
}
else {
value = value + 0.1;
}
});
}
);
}
}
Output :
That brings an end to the tutorial on how to create and display or show circular progress indicator in flutter. We have also seen an example where we’ve used CircularProgressIndicator widget and customized it. Let’s catch up with some other widget in the next post. Have a great day!!
Do like & share my facebook page. Subscribe to newsletter if you find this post helpful. Thank you !!
Reference : Flutter Official Documentation.
Hello
Hi fradesh.