Jak mogę zmienić kolor CircularProgressIndicator?

Wartość koloru jest przykładem Animation<Color>, ale mam nadzieję, że istnieje prostszy sposób na zmianę koloru bez kłopotów z animacją.

To zadziałało dla mnie:

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

Trzy sposoby rozwiązania problemu

1) Korzystanie z valueColorwłasności

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

2) Ustaw accentColorw głównym MaterialAppwidżecie. To najlepszy sposób, ponieważ nie chcesz ustawiać koloru przez cały czas, gdy używasz CircularProgressIndicatorwidżetu

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

3) Korzystanie z Themewidżetu

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

accentColormoże być użyty do koloru pierwszego planu widżetów.Zmienia kolor wszystkich widżetów pierwszego planu, w tym circularprogressbarMożesz użyć w następujący sposób:

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

Motyw to widżet, który można wstawić w dowolnym miejscu w drzewie widżetów. Zastępuje bieżący motyw niestandardowymi wartościami Spróbuj:

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

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

Domyślnie dziedziczy accentColor z Themedata

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

Możesz zmienić tę właściwość accentColor za pomocą nowego koloru. Innym sposobem jest użycie z predefiniowanymi danymi ThemeData, takimi jak ten

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

Lub możesz bezpośrednio zmienić tę właściwość koloru w CircularProgressIndicator, jak pokazano poniżej

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

W main.dartustawionym hasłem accentColorThe CircularProgressIndicatorużyje tego koloru

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

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