如何更改CircularProgressIndicator的颜色?
颜色的值是Animation< color >的实例,但我希望有一种更简单的方法来改变颜色,没有动画的麻烦。
如何更改CircularProgressIndicator的颜色?
颜色的值是Animation< color >的实例,但我希望有一种更简单的方法来改变颜色,没有动画的麻烦。
当前回答
这招对我很管用:
CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.white))
其他回答
accentColor已弃用,不再有效。
要在ThemeData中全局设置它,像这样设置:
光的主题:
theme: ThemeData(
colorScheme: ColorScheme.dark(
primary: Colors.pink,
),
),
黑暗的主题:
theme: ThemeData(
colorScheme: ColorScheme(
primary: Colors.pink,
),
),
本地:
或者如果你想要它只用于本地的一个小部件,只需要像这样设置CircularProgressIndicator的属性:
CircularProgressIndicator(
backgroundColor:Colors.white,
valueColor: AlwaysStoppedAnimation<Color>(Colors.pink),
),
只需将此代码写入应用程序的主题数据
ThemeData(
progressIndicatorTheme: ProgressIndicatorThemeData(
color: Colors.grey.shade700,),)
在主。dart设置主题为accentColor, CircularProgressIndicator将使用该颜色
void main() => runApp(new MaterialApp(
theme: ThemeData(primaryColor: Colors.red, **accentColor: Colors.yellowAccent**),
debugShowCheckedModeBanner: false,
home: SplashPage()
));
对于单色集合,
CircularProgressIndicator(
valueColor:AlwaysStoppedAnimation<Color>(Colors.red),
);
适用于多种颜色变换/设置。
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)),
),
),
);
}
}
默认情况下,它从Themedata继承了accentColor
void main() => runApp(new MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.blueAccent,
//This will be the color for CircularProgressIndicator color
),
home: Homepage()
));
你可以用你的新颜色改变这个accentColor属性。 另一种方法是像这样使用预定义的主题数据
void main() => runApp(new MaterialApp(
theme: ThemeData.light().copyWith(
accentColor: Colors.blueAccent,
//change the color for CircularProgressIndicator color here
),
home: Homepage()
));
或者,您可以直接在CircularProgressIndicator中更改此颜色属性,如下所示
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),