How to change color of CircularProgressIndicator

Question

How can I change the color of CircularProgressIndicator?

The value of the color is an instance of Animation<Color>, but I am hoping there is a simpler way to change the color without trouble of the animation.

score 395 · Answer 1 · edited Jul 22 '21 at 07:51

395

This worked for me:

CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.white))

edited Jul 22 '21 at 07:51

BIS Tech

17,000
12
99
148

answered Apr 28 '18 at 10:44

Mito

3,951
1
6
2

2

this one helped for linear progressindicator too thanks a lot – Rajesh Aug 01 '18 at 05:55
Thx! Since when AlwaysStoppedAnimation exists? – Rebar Feb 25 '20 at 17:46
In Flutter 1.20.0.7.2.pre I get `The argument type 'AlwaysStoppedAnimation' can't be assigned to the parameter type 'Animation'` – Zane Campbell Jul 24 '20 at 13:48
works also with CircularProgressIndicator.adaptive(valueColor: AlwaysStoppedAnimation(Colors.orange)) – cwhisperer Jun 05 '22 at 09:58

score 136 · Answer 2 · edited Oct 13 '21 at 07:20

Three way to solve your problem

1) Using valueColor property

CircularProgressIndicator(
     valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
),

2) Set accentColor in your main MaterialApp widget. This is best way because you dont want to set color all the time when you use CircularProgressIndicator widget

MaterialApp(
        title: 'My App',
        home: MainPAge(),
        theme: ThemeData(accentColor: Colors.blue),
),

3) Using Theme Widget

Theme(
      data: Theme.of(context).copyWith(colorScheme: ColorScheme(
            primary: Colors.red,
            // You should set other properties too
        )),
      child: new CircularProgressIndicator(),
)

Shirsh Shukla · Answer 3 · 2020-11-17T06:07:34.243

for a sigle color set,

 CircularProgressIndicator(
     valueColor:AlwaysStoppedAnimation<Color>(Colors.red),
   );

for multi color change/set.

class MyApp extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyApp> with TickerProviderStateMixin {
      AnimationController animationController;
      @override
      void dispose() {
        // TODO: implement dispose
        super.dispose();
        animationController.dispose();
      }
      @override
      void initState() {
        super.initState();
        animationController =
            AnimationController(duration: new Duration(seconds: 2), vsync: this);
        animationController.repeat();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Color Change CircularProgressIndicator"),
          ),
          body:  Center(
            child: CircularProgressIndicator(
              valueColor: animationController
                  .drive(ColorTween(begin: Colors.blueAccent, end: Colors.red)),
            ),
          ),
        );
      }
    }

animation controller used is here is outdated, for the new one refer, https://api.flutter.dev/flutter/animation/AnimationController-class.html — Achintha Isuru, Dec 05 '20 at 05:13

score 17 · Answer 4 · answered Jul 28 '18 at 12:57

accentColor can be used for foreground color of Widgets.It changes the color any foreground widgets including circularprogressbar You can use like this:

void main() => runApp(
  MaterialApp(
    title: 'Demo App',
    home: MainClass(),
    theme: ThemeData(accentColor: Colors.black),
  ),
);

score 14 · Answer 5 · answered Jan 14 '21 at 18:39

backgroundColor set light color it saw like light background color on the circle, valueColor it is loading color it will show compile loading circle over the gray color

 CircularProgressIndicator(
        backgroundColor: Colors.gray,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.black)
        )

score 11 · Answer 6 · answered Apr 21 '18 at 03:23

A theme is a widget that you can insert anywhere in your widget tree. It overrides the current theme with custom values Try this:

new Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.yellow),
      child: new CircularProgressIndicator(),
    );

reference: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

score 9 · Answer 7 · answered Feb 28 '22 at 10:41

9

Using progressIndicatorTheme allows to define a theme for progress indicator.

ThemeData(
      progressIndicatorTheme: ProgressIndicatorThemeData(color: Colors.white),
    )

answered Feb 28 '22 at 10:41

ASAD HAMEED

2,296
1
20
36

1

This is best answer using ThemeData as the case study – THEODORE Jun 27 '22 at 18:45

score 6 · Answer 8 · edited Sep 17 '20 at 06:36

6

valueColor:new AlwaysStoppedAnimation<Color>(Colors.yellow),

edited Sep 17 '20 at 06:36

Yashwardhan Pauranik

5,370
5
42
65

answered Jun 18 '20 at 11:19

Musfiq Shanta

1,298
13
9

Tomas Baran · Answer 9 · 2022-02-24T09:52:38.583

`accentColor` is deprecated and no longer works.

To have it globally in ThemeData, set it like this:

LIGHT THEME:

theme: ThemeData(
                 colorScheme: ColorScheme.dark(
                    primary: Colors.pink,
                    ),
                ),

DARK THEME:

theme: ThemeData(
                 colorScheme: ColorScheme(
                    primary: Colors.pink,
                    ),
                ),

LOCALLY:

Or if you want it only for that one widget locally, just set the property of the CircularProgressIndicator like this:

CircularProgressIndicator(
        backgroundColor:Colors.white,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.pink),
                    ),

score 3 · Answer 10 · edited Oct 06 '19 at 12:12

3

In main.dart set the theme accentColor, the CircularProgressIndicator will use that color

void main() => runApp(new MaterialApp(
  theme: ThemeData(primaryColor: Colors.red, **accentColor:  Colors.yellowAccent**),
  debugShowCheckedModeBanner: false,
  home: SplashPage()
));

edited Oct 06 '19 at 12:12

Ahmad Wael

105
1
6

answered May 31 '18 at 03:27

Pepe Valdivia

39
1

This will also affect other system colors, which is obviously not what was asked. – Alex Semeniuk Oct 15 '19 at 09:27

score 3 · Answer 11 · answered Jun 04 '19 at 05:22

By default, it inherits accentColor from Themedata

  void main() => runApp(new MaterialApp(
  theme: ThemeData(
                 primaryColor: Colors.blue,
                 accentColor:  Colors.blueAccent,
                 //This will be the color for CircularProgressIndicator color
               ),
  home: Homepage()
    ));

You can change this accentColor property with your new color. Other way is using with predefined ThemeData like this

void main() => runApp(new MaterialApp(
  theme: ThemeData.light().copyWith(
                 accentColor:  Colors.blueAccent,
                 //change the color for CircularProgressIndicator color here
               ),
  home: Homepage()
    ));

Or else you can directly change this color property in CircularProgressIndicator as shown below

CircularProgressIndicator(
         valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),

score 3 · Answer 12 · answered Dec 05 '21 at 07:40

3

just write this code in your theme data of your app

    ThemeData(
        progressIndicatorTheme: ProgressIndicatorThemeData(
            color: Colors.grey.shade700,),)

answered Dec 05 '21 at 07:40

Code With AK

41
1

BeHappy · Answer 13 · 2021-08-27T07:05:06.853

2

If you want to change it globally, in latest version of flutter you should change colorScheme:

void main() => runApp(
  MaterialApp(
    title: 'App',
    home: Home(),
    theme: ThemeData(
            colorScheme: ColorScheme(
                primary: Colors.red,
                // You should set other properties too
            )
        ),
  ),
);

edited Aug 27 '21 at 07:05

answered Jun 04 '21 at 13:30

BeHappy

3,705
5
18
59

score 1 · Answer 14 · edited Mar 09 '23 at 04:37

1

Use like this--->

CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.grey[500]),)),

edited Mar 09 '23 at 04:37

Md. Yeasin Sheikh

54,221
7
29
56

answered Nov 07 '20 at 09:54

Rasel Khan

2,976
19
25

score 0 · Answer 15 · edited Aug 13 '21 at 00:00

0

CircularProgressIndicator(
  backgroundColor: Colors.amberAccent,
  semanticsLabel: 'Linear progress indicator',
),

edited Aug 13 '21 at 00:00

enzo

9,861
3
15
38

answered Aug 12 '21 at 13:11

Diksha Pruthi

276
2
5

score -1 · Answer 16 · answered Mar 09 '22 at 03:49

-1

Try this:

CircularProgressIndicator(
  color: Colors.yellow, // Change your color here
),

answered Mar 09 '22 at 03:49

My Car

4,198
5
17
50

there's no `color` parameter in the `CircularProgressIndicator` class – ABDERRAHMANE OUALI Sep 01 '22 at 18:26
Actually there is a color parameter! @ ABDERRAHMANE OUALI what version of the flutter SDK are you on? – Darkhorse Jan 18 '23 at 13:46

score -5 · Answer 17 · answered May 26 '21 at 11:51

-5

<com.google.android.material.progressindicator.CircularProgressIndicator app:indicatorColor="@color/primaryColor" />

answered May 26 '21 at 11:51

Pat Lee

1,567
1
9
13

2

please read the question. The user specified the "flutter" tag – LucaRoverelli Aug 13 '21 at 14:22

How to change color of CircularProgressIndicator

17 Answers17

Three way to solve your problem

`accentColor` is deprecated and no longer works.

Linked

Related

How to change color of CircularProgressIndicator

17 Answers17

Three way to solve your problem

accentColor is deprecated and no longer works.

Linked

Related

`accentColor` is deprecated and no longer works.