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.
This worked for me:
CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.white))
The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Jul 24, 2020 at 13:48
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)
)
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
Using progressIndicatorTheme
allows to define a theme for progress indicator.
ThemeData(
progressIndicatorTheme: ProgressIndicatorThemeData(color: Colors.white),
)
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),
),
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),
),
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()
));
just write this code in your theme data of your app
ThemeData(
progressIndicatorTheme: ProgressIndicatorThemeData(
color: Colors.grey.shade700,),)
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
)
),
),
);
Use like this--->
CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.grey[500]),)),
CircularProgressIndicator(
backgroundColor: Colors.amberAccent,
semanticsLabel: 'Linear progress indicator',
),
Try this:
CircularProgressIndicator(
color: Colors.yellow, // Change your color here
),
color
parameter in the CircularProgressIndicator
class
Sep 1, 2022 at 18:26
<com.google.android.material.progressindicator.CircularProgressIndicator app:indicatorColor="@color/primaryColor" />