flutter - How to change color of CircularProgressIndicator

ID : 20057

viewed : 9

Tags : flutterdartcolorsflutter

Top 5 Answer for flutter - How to change color of CircularProgressIndicator

vote vote

97

This worked for me:

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

90

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

80

for a sigle color set,

enter image description here

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

for multi color change/set.

enter image description here

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

70

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

58

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

Top 3 video Explaining flutter - How to change color of CircularProgressIndicator

Related QUESTION?