Как изменить цвет CircularProgressIndicator

126

Как я могу изменить цвет CircularProgressIndicator?

Значение цвета является экземпляром Animation<Color>, но я надеюсь, что есть более простой способ изменить цвет без проблем с анимацией.

Сыпь
источник

Ответы:

260

Это сработало для меня:

valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
Мито
источник
это тоже помогло для линейного индикатора прогресса, спасибо
Раджеш-младший
Спасибо! С каких пор существует AlwaysStoppedAnimation?
Rebar
Во Flutter 1.20.0.7.2.pre я получаюThe argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Зейн Кэмпбелл
71

Три способа решить вашу проблему

1) Использование valueColorсвойства

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

2) Установите accentColorв своем основном MaterialAppвиджете. Это лучший способ, потому что вы не хотите постоянно устанавливать цвет при использовании CircularProgressIndicatorвиджета.

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

3) Использование Themeвиджета

Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.red),
      child: new CircularProgressIndicator(),
)
Санджайраджсинх
источник
15

accentColorможет использоваться для цвета переднего плана виджетов. Он изменяет цвет любых виджетов переднего плана, включая circularprogressbarВы можете использовать это так:

void main() => runApp(
  MaterialApp(
    title: 'Demo App',
    home: MainClass(),
    theme: ThemeData(accentColor: Colors.black),
  ),
);
Haileapp
источник
9

Тема - это виджет, который можно вставить в любое место дерева виджетов. Он заменяет текущую тему пользовательскими значениями. Попробуйте следующее:

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

ссылка: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

Акшай Нандвана
источник
3
valueColor:new AlwaysStoppedAnimation<Color>(Colors.yellow),
Мусфик Шанта
источник
2

По умолчанию он наследует accentColor от Themedata.

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

Вы можете изменить это свойство accentColor новым цветом. Другой способ - использовать с предопределенными ThemeData, подобными этому

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

Или вы можете напрямую изменить это свойство цвета в CircularProgressIndicator, как показано ниже.

CircularProgressIndicator(
         valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),
Мадду Сваруп
источник
2

В main.dartнаборе темы accentColor, то CircularProgressIndicatorбудет использовать этот цвет

void main() => runApp(new MaterialApp(
  theme: ThemeData(primaryColor: Colors.red, **accentColor:  Colors.yellowAccent**),
  debugShowCheckedModeBanner: false,
  home: SplashPage()
));
Пепе Вальдивия
источник
Это также повлияет на другие системные цвета, чего, очевидно, не спрашивали.
Алекс Семенюк
0

для набора цветов sigle,

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

для смены / набора нескольких цветов.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController animationController;
  @override
  void dispose() {
// TODO: implement dispose
    super.dispose();
    animationController.dispose();
  }
  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(duration: new Duration(seconds: 2), vsync: this);
    animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Color Change CircularProgressIndicator"),
      ),
      body:  Center(
        child: CircularProgressIndicator(
          valueColor: animationController
              .drive(ColorTween(begin: Colors.brown, end: Colors.red)),
        ),
      ),
    );
  }
}
ширш шукла
источник
0

Используйте как это --->

CircularProgressIndicator (valueColor: AlwaysStoppedAnimation (Colors.grey [500]),)),

Расел Хан
источник