Как я могу изменить цвет CircularProgressIndicator
?
Значение цвета является экземпляром Animation<Color>
, но я надеюсь, что есть более простой способ изменить цвет без проблем с анимацией.
Ответы:
Это сработало для меня:
valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
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(),
)
accentColor
может использоваться для цвета переднего плана виджетов. Он изменяет цвет любых виджетов переднего плана, включая circularprogressbar
Вы можете использовать это так:
void main() => runApp(
MaterialApp(
title: 'Demo App',
home: MainClass(),
theme: ThemeData(accentColor: Colors.black),
),
);
Тема - это виджет, который можно вставить в любое место дерева виджетов. Он заменяет текущую тему пользовательскими значениями. Попробуйте следующее:
new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new CircularProgressIndicator(),
);
ссылка: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d
valueColor:new AlwaysStoppedAnimation<Color>(Colors.yellow),
По умолчанию он наследует 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),
),
В main.dart
наборе темы accentColor
, то CircularProgressIndicator
будет использовать этот цвет
void main() => runApp(new MaterialApp(
theme: ThemeData(primaryColor: Colors.red, **accentColor: Colors.yellowAccent**),
debugShowCheckedModeBanner: false,
home: SplashPage()
));
для набора цветов 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)),
),
),
);
}
}