¿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.
Respuestas:
Esto funcionó para mí:
valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
1) Usar valueColor
propiedad
CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
),
2) Establecer accentColor
en su MaterialApp
widget principal .
Esta es la mejor manera porque no desea establecer el color todo el tiempo cuando usa el CircularProgressIndicator
widget
MaterialApp(
title: 'My App',
home: MainPAge(),
theme: ThemeData(accentColor: Colors.blue),
),
3) Usando Theme
Widget
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.red),
child: new CircularProgressIndicator(),
)
accentColor
se puede utilizar para el color de primer plano de los widgets. Cambia el color de los widgets de primer plano, incluido circularprogressbar
Puede usar así:
void main() => runApp(
MaterialApp(
title: 'Demo App',
home: MainClass(),
theme: ThemeData(accentColor: Colors.black),
),
);
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
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),
),
Al main.dart
establecer el tema accentColor
, CircularProgressIndicator
usará ese color
void main() => runApp(new MaterialApp(
theme: ThemeData(primaryColor: Colors.red, **accentColor: Colors.yellowAccent**),
debugShowCheckedModeBanner: false,
home: SplashPage()
));
valueColor: new AlwaysStoppedAnimation (Colors.yellow),