如何更改CircularProgressIndicator的颜色


104

如何更改的颜色CircularProgressIndicator

color的值是的实例Animation<Color>,但我希望有一种更简单的方法来更改颜色而不会出现动画麻烦。

Answers:


218

这对我有用:

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

这对线性进度
指示器

谢谢!从什么时候开始AlwaysStoppedAnimation存在?
钢筋

在Flutter 1.20.0.7.2.pre中,我得到The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Zane Campbell

50

解决问题的三种方法

1)使用valueColor财产

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

2)accentColor在您的主MaterialApp窗口小部件中设置。 这是最好的方法,因为在使用CircularProgressIndicator小部件时您不想一直设置颜色

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

3)使用Theme小部件

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

15

accentColor可以用于Widget的前景色。它可以更改任何前景Widget的颜色,包括circularprogressbar您可以这样使用:

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


2

main.dart设置主题时accentColorCircularProgressIndicator将使用该颜色

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

这也将影响其他系统颜色,这显然不是要求的。
Alex Semeniuk

0

默认情况下,它从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属性。其他方式是使用这样的预定义ThemeData

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.