Làm thế nào tôi có thể thay đổi màu sắc của CircularProgressIndicator?

Giá trị của màu là một ví dụ Animation<Color>, nhưng tôi hy vọng có một cách đơn giản hơn để thay đổi màu mà không gặp rắc rối với hoạt ảnh.

Điều này đã làm việc cho tôi:

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

Ba cách để giải quyết vấn đề của bạn

1) Sử dụng valueColortài sản

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

2) Đặt accentColortrong MaterialAppwidget chính của bạn . Đây là cách tốt nhất vì bạn không muốn đặt màu mọi lúc khi sử dụng CircularProgressIndicatorwidget

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

3) Sử dụng ThemeWidget

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

accentColorcó thể được sử dụng cho màu nền trước của Widget. Nó thay đổi màu bất kỳ widget tiền cảnh nào bao gồm circularprogressbarBạn có thể sử dụng như sau:

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

Chủ đề là một tiện ích mà bạn có thể chèn vào bất kỳ đâu trong cây tiện ích của mình. Nó ghi đè chủ đề hiện tại bằng các giá trị tùy chỉnh Hãy thử cách này:

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

tham khảo: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

Theo mặc định, nó kế thừa markColor từ Themedata

  void main() => runApp(new MaterialApp(
  theme: ThemeData(
                 primaryColor: Colors.blue,
                 accentColor:  Colors.blueAccent,
                 //This will be the color for CircularProgressIndicator color
               ),
  home: Homepage()
    ));

Bạn có thể thay đổi thuộc tính Accuolor này bằng màu mới của mình. Cách khác là sử dụng với ThemeData được xác định trước như thế này

void main() => runApp(new MaterialApp(
  theme: ThemeData.light().copyWith(
                 accentColor:  Colors.blueAccent,
                 //change the color for CircularProgressIndicator color here
               ),
  home: Homepage()
    ));

Hoặc nếu không, bạn có thể trực tiếp thay đổi thuộc tính màu này trong CircularProgressIndicator như hình dưới đây

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

Trong main.dartthiết lập chủ đề accentColor, CircularProgressIndicatorsẽ sử dụng màu đó

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

valueColor: AlwaysStoppedAnimation mới (Colors.yellow),