我想用动画无限改变容器的背景颜色。我知道我可以使用 AnimatedContainer 来做到这一点,如下代码所示:
AnimatedContainer(
duration: Duration(seconds: 2),
color: _color,
curve: Curves.fastOutSlowIn,
height: 200,
width: 200,
),
FlatButton(
child: Text('Change Color'),
onPressed: (){
setState((){
_color= Colors.red;
});
},
),
但我不想使用按下按钮来更改颜色和设置状态。我想在应用程序开始运行时更改它,而不按任何按钮。我怎样才能实现这个目标?
我认为我必须在更改颜色值后设置状态,但我不知道如何在不单击某些内容的情况下设置状态。
我也这样做了:
AnimatedContainer(
color: animatedBackgroundColor,
duration: Duration(seconds: 2),
onEnd: () => setState(() {
animatedBackgroundColor = const Color.fromARGB(255, 197, 14, 14);
}),
)
但这并没有改变任何事情。我认为在创建小部件并设置其颜色后,应该至少单击一次按钮来更改
animatedBackgroundColor
,然后动画开始。但我希望无需单击按钮即可开始从当前颜色更改为我在 onEnd
中设置的颜色。
你可以做这样的事情
@override
void initState() {
super.initState();
// Start a timer to change the color after 2 seconds
Timer(Duration(seconds: 2), () {
setState(() {
_color = Colors.red; // Change color to red after 2 seconds
});
});
}
在你的动画容器中
AnimatedContainer(
duration: Duration(seconds: 2),
color: _color,
curve: Curves.fastOutSlowIn,
height: 200,
width: 200,
),