CircularProgressIndicator & LinearProgressIndicator In Flutter
Introduction :
Progress Indicator describes the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. It basically shows the progress of a task or a time to display the length of processes.
Table of contents:
:: Circular and Linear Progress Indicator
:: Types of progress indicators
:: Properties of a progress indicator
Circular and Linear Progress Indicator:
Flutter can display or indicate the currently running progress in two ways CircularProgressIndicator and LinearProgressIndicator. They both can be used to inform the users about the status of ongoing progress and can currently make the users on hold for a while for any task or progress to complete such as file transfer, uploading, installation, downloading, etc.
A CircularProgressIndicator is a circular progress bar that spins to indicate that the application is busy or on hold or it is a widget that shows progress along a circle. While LinearProgressIndicator which is also known as a progress bar is basically a widget that shows progress in a linear direction or along a line.
There are two types of progress indicators:
Indeterminate: Indeterminate progress indicator is basically an indicator that does not have a specific value at any instance and indicates that the process is being made without indicating how much progress remains. To create an indeterminate progress bar we use value property as null.
Determinate: Determinate progress indicator is basically an indicator that does have a specific value at each time or an instance and it does indicate how much progress is completed. The value here increases monotonically from 0 to 1, where 0 indicates that progress is just started and 1 indicates that the progress is completed.
Sample :
This is how this sample UI looks like as shown below :
Now let’s try to understand the basic property of a progress bar
Let’s Start:
Here above the code, you can see that we have used some basic property inside a linear and circular progress indicator. Let’s try to understand them…
This is how the above UI looks :
Properties ::
backgroundColor: This property is used to set the background theme of a circular spin loader and a linear loader in our progress bar.
strokeWidth: It is a width of a line that is used to draw a circle in a CircularProgressIndicator.
minHeight: It is the minimum height of the line that is used to draw the indicator in a LinearProgressIndicator or it’s basically used to define how thick our line in an indicator looks.
valueColor: It is used to define the progress indicator’s value as an animated value. It basically covers the highlights of the completed task valued. To specify a constant color use: AlwaysStoppedAnimation<Color>(color).
value: It is a property that differentiates between the determinate and indeterminate progress bar. If null, this progress indicator is indeterminate, which means that it will show us predefined animation on our indicator with its motion that does not indicate how much progress is completed. If non-null, then it displays how much progress being made. A value of 0.0 indicates that no progress or progress being just started initially and a value of 1.0 indicates that the progress is being completed.
For more info visit down the link:
LinearProgressIndicator class
API docs for the LinearProgressIndicator class from the material library, for the Dart programming language.api.flutter.dev
CircularProgressIndicator class
API docs for the CircularProgressIndicator class from the material library, for the Dart programming language.api.flutter.dev
Thanks for reading this article ❤
Clap 👏 If this article helps you.
Feel free to post any queries or corrections you think is required…✔
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
