Cómo cambiar el color de CircularProgressIndicator

110

¿Cómo puedo cambiar el color de CircularProgressIndicator?

El valor del color es una instancia de Animation<Color>, pero espero que haya una forma más sencilla de cambiar el color sin problemas con la animación.

Arash
fuente

Respuestas:

230

Esto funcionó para mí:

valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
Mito
fuente
este también ayudó para el indicador de progreso lineal muchas gracias
Rajesh Jr.
¡Gracias! ¿Desde cuando existe AlwaysStoppedAnimation?
Rebar
En Flutter 1.20.0.7.2.pre obtengoThe argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Zane Campbell
54

Tres formas de resolver tu problema

1) Usar valueColorpropiedad

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

2) Establecer accentColoren su MaterialAppwidget principal . Esta es la mejor manera porque no desea establecer el color todo el tiempo cuando usa el CircularProgressIndicatorwidget

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

3) Usando ThemeWidget

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

accentColorse puede utilizar para el color de primer plano de los widgets. Cambia el color de los widgets de primer plano, incluido circularprogressbarPuede usar así:

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

Un tema es un widget que puede insertar en cualquier lugar de su árbol de widgets. Anula el tema actual con valores personalizados Pruebe esto:

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

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

Akshay Nandwana
fuente
2

De forma predeterminada, hereda accentColor de Themedata

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

Puede cambiar esta propiedad accentColor con su nuevo color. Otra forma es usar con ThemeData predefinido como este

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

O bien, puede cambiar directamente esta propiedad de color en CircularProgressIndicator como se muestra a continuación

CircularProgressIndicator(
         valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),
Maddu Swaroop
fuente
2

Al main.dartestablecer el tema accentColor, CircularProgressIndicatorusará ese color

void main() => runApp(new MaterialApp(
  theme: ThemeData(primaryColor: Colors.red, **accentColor:  Colors.yellowAccent**),
  debugShowCheckedModeBanner: false,
  home: SplashPage()
));
Pepe Valdivia
fuente
Esto también afectará a otros colores del sistema, que obviamente no es lo que se preguntó.
Alex Semeniuk
0

valueColor: new AlwaysStoppedAnimation (Colors.yellow),

Musfiq Shanta
fuente