What is Progress Indicator?
Progress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes. It’s simply a loading indicator which tells user to wait for some time till it’s get completed.
In Flutter, progress can be displayed in two ways:
- CircularProgressIndicator: A
CircularProgressIndicatoris a widget that shows progress along a circle. It is a circular progress bar that spins to indicate that the application is busy or on hold.
- LinearProgressIndicator: A
LinearProgressIndicatoralso known as a progress bar is a widget that shows progress in a linear direction or along a line to indicate that the application is in progress.
Let’s start creating CircularProgressIndicator and LinearProgressIndicator
material.dart package in order to display Flutter Progress Indicator widget implementing Material Design.
Next, the following code needs to be implemented in the respective main.dart file.
Now in order to improve the user interface of this application we need to implement some significant properties of the progress bar.
Following is the explanation of above-mentioned code for implementing Progress Indicators in Flutter:
- backgroundColor: This property is used in order to set the background color of a linear loader and a circular spin loader in the progress bar.
- strokeWidth: This property specifies the width of the line that is used to draw a circle in a
- minHeight: It is the minimum height of the line that is used to draw the indicator in a
LinearProgressIndicatoror in other words it is used to define how thick the line in an indicator looks.
- valueColor: It is used in order to define the progress indicator’s value as an animated value.
valueColorproperty covers the highlights of the completed task valued.
- AlwaysStoppedAnimation: It is used in order to specify a constant color in the
- value: Value property is used in order to differentiate between the determinate and indeterminate progress bar. If the value property is set as
null, the progress indicator is indeterminate, which means that it will show the predefined animation on the indicator with its motion that does not indicate how much progress is completed. If set as non-null, then it displays how much progress is being made at a particular instant. A value of
0.0indicates that progress is just started and a value of
1.0indicates that the progress is completed.
You have now successfully created circular and linear progress indicator in your Flutter app. You can always implement more style to your circular or linear progress indicator as per needed.