颤动动画没有持续时间

Question

我有一个有状态小部件，我试图将其转换为如下所示的 textStyle。

AnimatedDefaultTextStyle(
                duration: Duration(seconds: 3),
                child: Text(word),
                style: hideWord
                    ? TextStyle(
                        color: Colors.white,
                        fontSize: 40,
                        fontWeight: FontWeight.w300)
                    : TextStyle(
                        color: Colors.black,
                        fontSize: 40,
                        fontWeight: FontWeight.w300),
              ),

然而动画是即时的，不需要定义的 3 秒来完成，实际上根本没有动画，只是从黑色文本到白色文本的变化，而不是在 animationDefaultTextStyle 中设置的持续时间。

我通过点击事件的另一个有状态小部件通过以下方式触发动画。

cardlist[currentCardIndex].hideWord = true;

我在这里缺少什么？ 我可以实现 BLOC 并向卡片小部件添加一个侦听器，然后再 setState，但这对于应该是基本触发器的东西来说似乎有点过分了。

Answer 1

如果你想在小部件加载后 3 秒开始你的动画......你可以使用下面的代码......

动画持续时间为一秒

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  var hideWord = true;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3)).then((value) {
      setState(() {
        hideWord = false;
      });
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.white,
        body: AnimatedDefaultTextStyle(
          duration: Duration(seconds: 1),
          child: Text("word"),
          style: hideWord
              ? TextStyle(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.w300)
              : TextStyle(
              color: Colors.black,
              fontSize: 40,
              fontWeight: FontWeight.w300),
        ));
  }
}