如何更改CircularProgressIndicator的颜色

Question

我该怎么改变 CircularProgressIndicator 的颜色？

颜色的值是一个 Animation<Color> 实例，但我希望有一种更简单的方法来改变颜色，而不必处理动画。

- Arash

Answer 1

这对我有效：

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

- Mito

---

这个也对线性进度指示器有帮助，非常感谢。 - Rajesh

谢谢！AlwaysStoppedAnimation从什么时候开始存在的？ - Rebar

在Flutter 1.20.0.7.2.pre中，我得到了以下错误信息： The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'。 - Zane Campbell

也适用于CircularProgressIndicator.adaptive(valueColor: AlwaysStoppedAnimation(Colors.orange))。 - cwhisperer

Answer 2

解决问题的三种方法

1）使用valueColor属性

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

2) 在主MaterialApp widget中设置accentColor。 这是最好的方法，因为您不想在每次使用CircularProgressIndicator widget时都设置颜色。

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

3) 使用 Theme 小部件

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

- Sanjayrajsinh

---

accentColor不再存在。根据Android文档的说法，应该使用MaterialTheme的primaryColor。然而，在我的测试中，这没有任何效果。不确定是否有Method 2的替代方案。不过，Method 1仍然有效。:-) - undefined

Answer 3

对于单一颜色组合，

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

- shirsh shukla

---

使用的动画控制器已经过时，如需新的，请参考 https://api.flutter.dev/flutter/animation/AnimationController-class.html。 - Achintha Isuru

Answer 4

accentColor 可以用于小部件的前景色。它会改变所有前景小部件的颜色，包括 circularprogressbar。使用方式如下：

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

- Haileapp

Answer 5

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

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

- Mr Bhati

Answer 6

一个主题是一个您可以插入到小部件树的小部件。它使用自定义值覆盖当前主题。尝试这个：

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

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

- Akshay Nandwana

Answer 7

使用progressIndicatorTheme可以定义进度指示器的主题。

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

- ASAD HAMEED

---

这是使用ThemeData作为案例研究的最佳答案。 - THEODORE

Answer 8

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

- Musfiq Shanta

Answer 9

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

- Tomas Baran

Answer 10

只需在您应用程序的主题数据中编写此代码

    ThemeData(
        progressIndicatorTheme: ProgressIndicatorThemeData(
            color: Colors.grey.shade700,),)

- Code With AK