Flutter Progress Bar
A progress bar is a graphical control element used to show the progress of a task such as downloading, uploading, installation, file transfer, etc. In this section, we are going to understand how to show a progress bar in a flutter application.
There are two types of progress indicator in flutter.
- LinearProgressIndicator
- CircularProgressIndicator
LinearProgressIndicator
The linear progress bar is used to show the progress of the task in a horizontal line.
Flutter provides mainly two types of linear progress indicators:
Determinate
Determinate progress bar indicates the actual amount of progress at each point in making the task. Its value will increase monotonically from 0.0 to 1.0 to show the amount of task completed at that time. We need to use a non-null value from 0.0 to 1.0 for creating a determinate progress indicator.
Indeterminate
Indeterminate progress bar does not indicate the amount of progress in completing the task. It means we do not know when the task is finished. It makes progress without indicating how much progress remains. We can make an indeterminate progress indicator by using a null value.
Properties
double value: It is used to specify the non-null value between 0.0 to 1.0, representing the completion of task progress.
Color backgroundColor: It is used to specify the background color of the widget.
Animation<Color> valueColor: It is used to specify the progress indicator’s color as an animated value.
CircularProgressIndicator
It is a widget, which spins to indicate the waiting process in your application. It shows the progress of a task in a circular shape. It also displays the progress bar in two ways: Determinate and Indeterminate.
A determinate progress bar is used when we want to show the progress of ongoing tasks such as the percentage of downloading or uploading files, etc. We can show the progress by specifying the value between 0.0 and 1.0.
An indeterminate progress bar is used when we do not want to know the percentage of an ongoing process. By default, CircularProgressIndicator shows the indeterminate progress bar.
Thank you!
