3 min read

While developing the Flutter, you might have added the API calls or some other operations that wait for the data to get loaded before it appears on the screen. In such scenarios, you might have added the circular progress indicator in your app. It’s a way of letting users know about something is happening in the background. But sometimes you may also want to change the color of the circular progress indicator. So in this tutorial, we’ll see how you can change circular progress indicator color in Flutter.

flutter change circular progress indicator color

Here’s what we’ll cover:

The problem

When you add the CircularProgressIndicator to your page, you’ll notice that it appears in a color that you have set as the primarySwatch inside the theme. For example, if it’s blue then you’ll see blue color for the circular progress indicator. In most cases, you may want to change this default color to the color given by your designer.

How to change circular progress indicator color in Flutter

To change the circular progress indicator color in Flutter, you can use the valueColor property of the CircularProgressIndicator widget and then assign the appropriate color to it.

 Steps

Step 1: Locate the CircularProgressIndicator of which you would like to change the color.

Step 2: Add the valueColor property.

Step 3: Assign the AlwaysStoppedAnimation().

Step 4: Inside the AlwaysStoppedAnimation(), add the color of your choice.

Step 5: (Optional) To change the background color of the CircularProgressIndicator you can add the backgroundColor parameter and set it to the appropriate color.

Code Example

CircularProgressIndicator(
  backgroundColor: Colors.black26,
  valueColor: AlwaysStoppedAnimation<Color>(
    Colors.black, //<-- SEE HERE
  ),
),

Output

flutter change circular progress indicator color only at single place

Also, see how to add color from hex. By using hex codes, you can easily create colors that match your brand or design vision.

Globally changing circular progress indicator color

To change the circular progress indicator color globally, you can use the ColorScheme class. It’s a group of 25 colors based on the Material 3 design. Using the ColorScheme class you can define the colors for your app.

Steps

Step 1: Locate the file where you have the MaterialApp > ThemeData

Step 2: Inside the ThemeData add the colorScheme parameter and assign the ColorScheme.fromSeed(). The ColorScheme.fromSeed() is used to automatically generate the Color scheme based on the material 3 design specification.

Step 3: Inside the ColorScheme.fromSeed(), add the seedColor parameter and assign the color and see if the color of the circular progress indicator matches your design.

Step 4: If not, add one more parameter called primary and assign the color of your choice.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.greenAccent,
      primary: Colors.greenAccent, //<-- SEE HERE
    ),
  ),
  home: CircularProgressColorDemo(),
);
------
CircularProgressIndicator(),
flutter change circular progress indicator color globally

Conclusion

In this tutorial, we learned how to the with practical examples. We first saw the problem with adding the CircularProgressIndicator as it is and then saw the way to change the color. Finally, we also explored the way to change the color of circular progress indicator color globally in your Flutter app.

Would you like to check other interesting Flutter tutorials?

5 Easy Steps to Update App Version in Flutter [2022]
Change Android Minsdkversion in Flutter  –  2 Easy Ways [2022]