如何更改CircularProgressIndicator的颜色?

颜色的值是Animation< color >的实例,但我希望有一种更简单的方法来改变颜色,没有动画的麻烦。


当前回答

解决问题的三种方法

1)使用valueColor属性

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

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

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

3)使用主题小部件

Theme(
      data: Theme.of(context).copyWith(colorScheme: ColorScheme(
            primary: Colors.red,
            // You should set other properties too
        )),
      child: new CircularProgressIndicator(),
)

其他回答

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

使用progressIndicatorTheme允许为进度指示器定义一个主题。

ThemeData(
      progressIndicatorTheme: ProgressIndicatorThemeData(color: Colors.white),
    )

如果你想全局更改,在最新版本的flutter中,你应该更改colorScheme:

void main() => runApp(
  MaterialApp(
    title: 'App',
    home: Home(),
    theme: ThemeData(
            colorScheme: ColorScheme(
                primary: Colors.red,
                // You should set other properties too
            )
        ),
  ),
);
<com.google.android.material.progressindicator.CircularProgressIndicator app:indicatorColor="@color/primaryColor" />

默认情况下,它从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),
                    ),