当应用程序在flutter中运行时,用动画更改容器的背景颜色

问题描述 投票:0回答:1

我想用动画无限改变容器的背景颜色。我知道我可以使用 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
中设置的颜色。

flutter flutter-animation
1个回答
0
投票

你可以做这样的事情

@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,
          ),
© www.soinside.com 2019 - 2024. All rights reserved.