So ändern Sie die Farbe von CircularProgressIndicator

100

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.

Arash
quelle

Antworten:

215

Das hat bei mir funktioniert:

valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
Mito
quelle
Dieser hat auch für den linearen Fortschrittsindikator geholfen, vielen Dank
Rajesh Jr.
Vielen Dank! Seit wann gibt es AlwaysStoppedAnimation?
Rebar
In Flutter 1.20.0.7.2.pre bekomme ichThe argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Zane Campbell
43

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(),
)
Sanjayrajsinh
quelle
15

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),
  ),
);
Haileapp
quelle
9

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

Akshay Nandwana
quelle
2

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()
));
Pepe Valdivia
quelle
Dies wirkt sich auch auf andere Systemfarben aus, was offensichtlich nicht gefragt wurde.
Alex Semeniuk
0

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),
                    ),
Maddu Swaroop
quelle
0

valueColor: neue AlwaysStoppedAnimation (Colors.yellow),

Musfiq Shanta
quelle