Comment puis-je changer la couleur de CircularProgressIndicator?

La valeur de la couleur est une instance de Animation<Color>, mais j'espère qu'il existe un moyen plus simple de changer la couleur sans problème de l'animation.

Cela a fonctionné pour moi:

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

Trois façons de résoudre votre problème

1) Utilisation de la valueColorpropriété

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

2) Définissez accentColordans votre MaterialAppwidget principal . C'est le meilleur moyen car vous ne voulez pas définir la couleur tout le temps lorsque vous utilisez le CircularProgressIndicatorwidget

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

3) Utilisation du Themewidget

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

accentColorpeut être utilisé pour la couleur de premier plan des widgets.Il change la couleur de tous les widgets de premier plan, y compris circularprogressbarVous pouvez utiliser comme ceci:

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

Un thème est un widget que vous pouvez insérer n'importe où dans votre arborescence de widgets. Il remplace le thème actuel avec des valeurs personnalisées Essayez ceci:

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

référence: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

Par défaut, il hérite 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()
    ));

Vous pouvez modifier cette propriété accentColor avec votre nouvelle couleur. Une autre façon est d'utiliser avec ThemeData prédéfini comme celui-ci

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

Ou bien vous pouvez modifier directement cette propriété de couleur dans CircularProgressIndicator comme indiqué ci-dessous

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

En main.dartdéfinissant le thème accentColor, le CircularProgressIndicatorutilisera cette couleur

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

valueColor: nouveau AlwaysStoppedAnimation (Colors.yellow),