Como alterar a cor do CircularProgressIndicator

105

Como posso mudar a cor de CircularProgressIndicator?

O valor da cor é uma instância de Animation<Color>, mas espero que haja uma maneira mais simples de alterar a cor sem problemas para a animação.

Arash
fonte

Respostas:

219

Isso funcionou para mim:

valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
Mito
fonte
este ajudou para o indicador de progressão linear também muito obrigado
Rajesh Jr.
THX! Desde quando AlwaysStoppedAnimation existe?
Vergalhão
No Flutter 1.20.0.7.2.pre eu receboThe argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Zane Campbell
50

Três maneiras de resolver seu problema

1) Usando valueColorpropriedade

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

2) Defina accentColorem seu MaterialAppwidget principal . Esta é a melhor maneira, porque você não quer definir a cor o tempo todo ao usar o CircularProgressIndicatorwidget

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

3) Usando o ThemeWidget

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

accentColorpode ser usado para a cor de primeiro plano de Widgets. Muda a cor de qualquer widget de primeiro plano, incluindo circularprogressbarVocê pode usar assim:

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

Um tema é um widget que você pode inserir em qualquer lugar da árvore de widgets. Ele substitui o tema atual com valores personalizados Tente isto:

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

referência: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

Akshay Nandwana
fonte
2

Ao main.dartdefinir o tema accentColor, o CircularProgressIndicatorusará essa cor

void main() => runApp(new MaterialApp(
  theme: ThemeData(primaryColor: Colors.red, **accentColor:  Colors.yellowAccent**),
  debugShowCheckedModeBanner: false,
  home: SplashPage()
));
Pepe Valdivia
fonte
Isso também afetará outras cores do sistema, o que obviamente não é o que foi solicitado.
Alex Semeniuk
1

Por padrão, ele herda 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()
    ));

Você pode alterar esta propriedade accentColor com sua nova cor. Outra maneira é usar ThemeData predefinidos como este

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

Ou então você pode alterar diretamente esta propriedade de cor em CircularProgressIndicator como mostrado abaixo

CircularProgressIndicator(
         valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),
Maddu Swaroop
fonte
0

valueColor: new AlwaysStoppedAnimation (Colors.yellow),

Musfiq Shanta
fonte