Как изменить цвет 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),
  ),
);

9

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

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

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



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)),
        ),
      ),
    );
  }
}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.