4 min read

No one likes to wait. User’s frustration increases when you don’t inform them about the progress your app is making. For example, if you make a heavy API call and just show them a simple wait message, it won’t give any impression of something being processed behind the scene. Adding Progress indicators to your app helps your users know the progress of the task they have triggered. So in this tutorial, we’ll see all about Flutter Progress Indicator. We’ll cover both Circular and Linear Progress Indicators.

Here’s how it looks:

flutter progress indicator demo

Here’s exactly what we’ll cover:

What is Progress Indicator

A progress indicator is a way of communicating with users about the status of the task the app is performing. For example, The Progress Indicator can be used when users are trying to retrieve/save data from/to the backend server.

Types of Flutter Progress Indicator

Following are the types of Flutter Progress Indicator:

  1. Linear Progress Indicator: Learn more here.
  2. Circular Progress Indicator: Learn more here.

You can use any of these based on your design requirement.

Subtypes of Progress Indicator

Each progress indicator (Linear or Circular) is further available in the following two types:

  1. Indeterminate: The Indeterminate progress bar just shows the progress is being made but doesn’t inform about the current status of progress. For example, if you use the Indeterminate Circular Progress Indicator then the circle keeps on spinning but doesn’t display the progress in percentage.
  2. Determinate: The Determinate progress bar is opposite of the indeterminate and shows the current status of progress.

Linear Progress Indicator

The Linear Progress Indicator shows the progress of the ongoing tasks in a line fashion. Let’s see how you can add the Indeterminate or determinate Linear Progress Indicator and customize it.

flutter linear progress indicator demo

Add Indeterminate Linear Progress Indicator

To add the indeterminate Linear Progress Indicator to your Flutter app:

Step 1: Go to the dart file and locate the widget inside which you like to add the progress indicator.

Step 2: Add the LinearProgressIndicator() widget.

Step 3: Run your app.

Code Example:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    LinearProgressIndicator(), //<-- SEE HERE
  ],
)

Add Determinate Linear Progress Indicator

To add the Determinate Linear Progress Indicator to your Flutter app:

Step 1: Go to the dart file and locate the widget inside which you like to add the progress indicator.

Step 2: Add the LinearProgressIndicator() widget.

Step 3: Inside the LinearProgressIndicator() widget, add value parameter, and provide the value between 0 to 1. For example, giving the value as 0.7 will fill the 70 percent of the progress bar.

Step 3: Run your app.

Code Example:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    LinearProgressIndicator(
       value: 0.7, // <-- SEE HERE
     ),
  ],
)

Note: To update progress dynamically, create a variable that holds the progress value, assign the variable to value property, and rebuild the widget using the setState.

Customize

You may want to customize the linear progress indicator to match your design. You can change the color and background color of the line.

To customize the linear progress indicator:

Step 1: Add the LinearProgressIndicator() widget.

Step 2: Inside the LinearProgressIndicator() widget, add color parameter, and provide the color.

Step 3: Similarly, add backgroundColor parameter, and provide the color.

Code Example:

Column(
  children: [
    LinearProgressIndicator(
      value: 0.7,
      color: Colors.greenAccent, //<-- SEE HERE
      backgroundColor: Colors.grey, //<-- SEE HERE
    ),
  ],
)

Circular Progress Indicator

The Circular Progress Indicator shows the progress of the ongoing tasks in a Circle fashion. Let’s see how you can add the Indeterminate or determinate Circular Progress Indicator and customize it.

flutter circular progress indicator demo

Add Indeterminate Circular Progress Indicator

To add the indeterminate Circular Progress Indicator to your Flutter app:

Step 1: Go to the dart file and locate the widget inside which you like to add the progress indicator.

Step 2: Add the CircularProgressIndicator() widget.

Step 3: Run your app.

Code Example:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    CircularProgressIndicator(), //<-- SEE HERE
  ],
)

Add Determinate Circular Progress Indicator

To add the Determinate Circular Progress Indicator to your Flutter app:

Step 1: Go to the dart file and locate the widget inside which you like to add the progress indicator.

Step 2: Add the CircularProgressIndicator() widget.

Step 3: Inside the CircularProgressIndicator() widget, add value parameter, and provide the value between 0 to 1. For example, giving the value as 0.3 will fill the 30 percent of the progress bar.

Step 3: Run your app.

Code Example:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    CircularProgressIndicator(
       value: 0.3, // <-- SEE HERE
     ),
  ],
)

Note: To update progress, create a variable that holds the progress value, assign the variable to value property, and rebuild the widget using the setState.

Customize

You may want to customize the circular progress indicator to match your design. You can change the color and background color of the circle.

To customize the circular progress indicator:

Step 1: Add the CircularProgressIndicator() widget.

Step 2: Inside the CircularProgressIndicator() widget, add color parameter, and provide the color.

Step 3: Similarly, add backgroundColor parameter, and provide the color.

Code Example:

Column(
  children: [
    CircularProgressIndicator(
      value: 0.3,
      color: Colors.greenAccent, //<-- SEE HERE
      backgroundColor: Colors.grey, //<-- SEE HERE
    ),
  ],
)

Conclusion

In this tutorial, we learned all about Flutter Progress Indicators. First, we understood what is progress indicator, what are its types, what are its subtypes, and then finally saw how you can add the Linear and Circular progress indicators to your Flutter app.

Would you like to check other interesting Flutter tutorials?

Flutter Position Widget in Stack: 3 Top Ways to Know (2022)
Pass Data to Stateful Widget in Flutter : 3 Easy Steps (2022 Code)