Come cambiare il colore di CircularProgressIndicator


110

Come posso cambiare il colore di CircularProgressIndicator?

Il valore del colore è un esempio di Animation<Color>, ma spero che esista un modo più semplice per cambiare il colore senza problemi con l'animazione.

Risposte:


229

Questo ha funzionato per me:

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

anche questo ha aiutato per l'indicatore di progresso lineare, grazie mille
Rajesh Jr.

Grazie! Da quando esiste AlwaysStoppedAnimation?
Rebar

In Flutter 1.20.0.7.2.pre ottengoThe argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Zane Campbell il

54

Tre modi per risolvere il tuo problema

1) Utilizzo della valueColorproprietà

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

2) Imposta accentColornel tuo MaterialAppwidget principale . Questo è il modo migliore perché non vuoi impostare il colore tutto il tempo quando usi il CircularProgressIndicatorwidget

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

3) Utilizzo del Themewidget

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

15

accentColorpuò essere utilizzato per il colore di primo piano dei widget.Cambia il colore di qualsiasi widget di primo piano, incluso circularprogressbarPuoi usare in questo modo:

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


2

Per impostazione predefinita, eredita accentColor da Themedata

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

Puoi modificare questa proprietà accentColor con il tuo nuovo colore. Un altro modo è usare con ThemeData predefiniti come questo

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

Oppure puoi modificare direttamente questa proprietà del colore in CircularProgressIndicator come mostrato di seguito

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

2

Nell'impostare main.dartil tema accentColor, CircularProgressIndicatorutilizzerà quel colore

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

Ciò influenzerà anche altri colori di sistema, che ovviamente non è ciò che è stato richiesto.
Alex Semeniuk

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.