How to change color of CircularProgressIndicator

Question

This worked for me:

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

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(),
)

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)),
            ),
          ),
        );
      }
    }

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),
  ),
);

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)
        )