ฉันจะเปลี่ยนสีของCircularProgressIndicator?

ค่าของสีเป็นตัวอย่างหนึ่งAnimation<Color>แต่ฉันหวังว่าจะมีวิธีที่ง่ายกว่านี้ในการเปลี่ยนสีโดยไม่มีปัญหากับภาพเคลื่อนไหว

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

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

สามวิธีในการแก้ปัญหาของคุณ

1) การใช้valueColorทรัพย์สิน

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

2) ตั้งค่าaccentColorในMaterialAppวิดเจ็ตหลักของคุณ นี่เป็นวิธีที่ดีที่สุดเนื่องจากคุณไม่ต้องการกำหนดสีตลอดเวลาเมื่อคุณใช้CircularProgressIndicatorวิดเจ็ต

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

3) การใช้Themeวิดเจ็ต

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

accentColorสามารถใช้สำหรับสีพื้นหน้าของวิดเจ็ตมันเปลี่ยนสีวิดเจ็ตเบื้องหน้าใด ๆ รวมถึง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)),
            ),
          ),
        );
      }
    }

ธีมคือวิดเจ็ตที่คุณสามารถแทรกที่ใดก็ได้ในแผนผังวิดเจ็ตของคุณ มันจะแทนที่ธีมปัจจุบันด้วยค่าที่กำหนดเองลองสิ่งนี้:

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

อ้างอิง: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

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

โดยค่าเริ่มต้นจะสืบทอด accentColor จาก Themedata

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

ในmain.dartการตั้งค่ารูปแบบaccentColorที่CircularProgressIndicatorจะใช้สีที่

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

ใช้แบบนี้ --->

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