解决问题的三种方法

Question

如何更改CircularProgressIndicator的颜色？

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

Answer 1

这对我有用：

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

Answer 2

您可以添加此代码。

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

Answer 3

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

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

Answer 4

accentColor可用于Widget的前景色。它会更改包括circularprogressbar在内的任何前景Widget的颜色，您可以这样使用：

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

Answer 5

解决问题的三种方法

1）使用valueColor属性

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

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

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

2）使用Theme小部件

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

Answer 6

获取单个颜色集，

 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 7

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

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

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

Answer 8

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

Answer 9

这对我来说很好。

Container(
            child: Center(
              child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(appColor),
              ),
            ),
          )

Answer 10

对于 flutter 的最新版本 (2.2.0)，您应该更改 colorScheme：

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

Answer 11

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

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

Answer 12

像这样使用--->

CircularProgressIndicator（valueColor：AlwaysStoppedAnimation（Colors.grey [500]），）），

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

Answer 14

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

如何更改CircularProgressIndicator的颜色

14 个答案:

解决问题的三种方法