如何更改 CircularProgressIndicator 的颜色答案

【问题标题】：How to change color of CircularProgressIndicator如何更改 CircularProgressIndicator 的颜色
【发布时间】：2018-10-01 18:50:53
【问题描述】：

如何更改CircularProgressIndicator的颜色？

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

【问题讨论】：

标签： flutter dart colors

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

解决问题的三种方法

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 小部件

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果你想全局更改它，在最新版本的flutter中你应该更改colorScheme：

void main() => runApp(
  MaterialApp(
    title: 'App',
    home: Home(),
    theme: ThemeData(
            colorScheme: ColorScheme(
                primary: Colors.red,
                // You should set other properties too
            )
        ),
  ),
);

【讨论】：

【解决方案5】：

CircularProgressIndicator(
  backgroundColor: Colors.amberAccent,
  semanticsLabel: 'Linear progress indicator',
),

【讨论】：

【解决方案6】：

这对我有用：

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

【讨论】：

这个对线性进度指示器也有帮助，非常感谢
谢谢！从什么时候开始存在 AlwaysStoppedAnimation？
在 Flutter 1.20.0.7.2.pre 我得到The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'

【解决方案7】：

<com.google.android.material.progressindicator.CircularProgressIndicator app:indicatorColor="@color/primaryColor" />

【讨论】：

请阅读问题。用户指定了“flutter”标签

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

对于单一颜色集，

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

【讨论】：

这里使用的动画控制器已经过时了，新的请参考api.flutter.dev/flutter/animation/…

【解决方案10】：

这样使用--->

CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.grey[500]),)),

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

在main.dart 中设置主题accentColor，CircularProgressIndicator 将使用该颜色

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

【讨论】：

这也会影响其他系统颜色，这显然不是要求的。

【解决方案13】：

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

【讨论】：

【解决方案14】：

accentColor 可用于小部件的前景色。它改变任何前景小部件的颜色，包括circularprogressbar 你可以这样使用：

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

【讨论】：

【解决方案15】：

主题是一个小部件，您可以在小部件树的任何位置插入它。它使用自定义值覆盖当前主题试试这个：

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

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

【讨论】：