如何更改CircularProgressIndicator的颜色?

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


当前回答

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

其他回答

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

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

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

对于单色集合,

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

如果你想全局更改,在最新版本的flutter中,你应该更改colorScheme:

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

像这样使用——>

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