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.
Here’s what we’ll cover:
- The problem
- How to change circular progress indicator color in Flutter
- Globally changing circular progress indicator color
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.
Step 1: Locate the
CircularProgressIndicator of which you would like to change the color.
Step 2: Add the
Step 3: Assign the
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.
CircularProgressIndicator( backgroundColor: Colors.black26, valueColor: AlwaysStoppedAnimation<Color>( Colors.black, //<-- SEE HERE ), ),
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.
Step 1: Locate the file where you have the
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.
MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, colorScheme: ColorScheme.fromSeed( seedColor: Colors.greenAccent, primary: Colors.greenAccent, //<-- SEE HERE ), ), home: CircularProgressColorDemo(), ); ------ CircularProgressIndicator(),
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?