如何更改CircularProgressIndicator的颜色?

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


当前回答

可以使用accentColor作为widget的前景色。它可以改变任何前景小部件的颜色,包括circularprogressbar。

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

其他回答

只需将此代码写入应用程序的主题数据

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

对于单色集合,

 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)),
            ),
          ),
        );
      }
    }
valueColor:new AlwaysStoppedAnimation<Color>(Colors.yellow),

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

主题是可以插入到小部件树中的任何位置的小部件。 它用自定义值覆盖当前主题 试试这个:

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

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