Wie kann ich die Farbe von ändern CircularProgressIndicator?

Der Wert der Farbe ist ein Beispiel dafür Animation<Color>, aber ich hoffe, dass es einen einfacheren Weg gibt, die Farbe ohne Probleme mit der Animation zu ändern.

Das hat bei mir funktioniert:

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

Drei Möglichkeiten, um Ihr Problem zu lösen

1) Verwenden der valueColorEigenschaft

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

2) Stellen Sie accentColorin Ihrem Haupt- MaterialAppWidget ein. Dies ist der beste Weg, da Sie bei Verwendung des CircularProgressIndicatorWidgets nicht immer die Farbe einstellen möchten

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

3) ThemeWidget verwenden

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

accentColorkann für die Vordergrundfarbe von Widgets verwendet werden. Es ändert die Farbe aller Vordergrund-Widgets, einschließlich circularprogressbarSie können wie folgt verwenden:

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

Ein Thema ist ein Widget, das Sie an einer beliebigen Stelle in Ihrem Widgetbaum einfügen können. Es überschreibt das aktuelle Thema mit benutzerdefinierten Werten. Versuchen Sie Folgendes:

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

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

Im main.dartSet des Thema accentColor, das CircularProgressIndicatorwird diese Farbe verwenden

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

Standardmäßig erbt es accentColor von Themedata

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

Sie können diese AccentColor-Eigenschaft mit Ihrer neuen Farbe ändern. Eine andere Möglichkeit ist die Verwendung mit vordefinierten ThemeData wie diesen

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

Sie können diese Farbeigenschaft auch direkt in CircularProgressIndicator wie unten gezeigt ändern

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

valueColor: neue AlwaysStoppedAnimation (Colors.yellow),