如何更改CircularProgressIndicator的颜色

Question

我怎样才能改变颜色CircularProgressIndicator？

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

Answer 1

这对我有用:

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

Answer 2

三种方法解决您的问题

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

Answer 3

您可以添加此代码.

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

Answer 4

对于单一颜色集，

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

Answer 5

使用progressIndicatorTheme允许定义进度指示器的主题。

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

Answer 6

accentColor可以用于Widgets的前景色.它可以改变任何前景小部件的颜色,包括circularprogressbar你可以像这样使用:

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

Answer 7

backgroundColor设置浅色，它在圆圈上看到的浅色背景色，valueColor是加载颜色，它将在灰色上显示编译加载圆圈

 CircularProgressIndicator(
        backgroundColor: Colors.gray,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.black)
        )

Answer 8

主题是一个小部件，您可以将其插入到小部件树的任何位置。它使用自定义值覆盖当前主题。尝试以下操作：

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

参考：https : //gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

Answer 9

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

Answer 10

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