How to implement Progress Indicators in Flutter

In this tutorial, you will understand what is Progress Indicator, Circular and Linear Progress indicator and how to implement these in your Flutter app.

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:

  1. CircularProgressIndicator: A CircularProgressIndicator is 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.
CircularProgressIndicator
  1. LinearProgressIndicator: A LinearProgressIndicator also 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.
LinearProgressIndicator

Let’s start creating CircularProgressIndicator and LinearProgressIndicator

Step 1

Import the material.dart package in order to display Flutter Progress Indicator widget implementing Material Design.

import 'package:flutter/material.dart';

Step 2

Next, the following code needs to be implemented in the respective main.dart file.

Simple Circular and Linear Progress Indicator

Step 3

Now in order to improve the user interface of this application we need to implement some significant properties of the progress bar.

Styled Circular and Linear Progress Indicator

Explanation

Following is the explanation of above-mentioned code for implementing Progress Indicators in Flutter:

  1. 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.
  2. strokeWidth: This property specifies the width of the line that is used to draw a circle in a CircularProgressIndicator.
  3. minHeight: It is the minimum height of the line that is used to draw the indicator in a LinearProgressIndicator or in other words it is used to define how thick the line in an indicator looks.
  4. valueColor: It is used in order to define the progress indicator’s value as an animated value. valueColor property covers the highlights of the completed task valued.
  5. AlwaysStoppedAnimation: It is used in order to specify a constant color in the valueColor property.
  6. 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.0 indicates that progress is just started and a value of 1.0 indicates that the progress is completed.

Done 🎉

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.

Thank you! For more queries or any doubts in this, you can freely contact me at GITHUB and INSTAGRAM.