一旦 animatedText 在 flutter 中完成动画，如何更改按钮的可见性

Question

所以我正在做一个新的 flutter 项目，一个人选择一条路径，然后沿着那条路径走，为了让它看起来有趣，文本会被动画化，然后会出现两个按钮来选择路径。但是，这是我第一次使用 animated_text_kit 并且我不知道如何在动画完成后显示按钮。所以我的问题是，有人知道怎么做吗？顺便说一句，这是代码

import 'package:animated_text_kit/animated_text_kit.dart';

class PD extends StatefulWidget {
  const PD({Key? key}) : super(key: key);

  @override
  State<PD> createState() => _PDState();
}

class _PDState extends State<PD> {

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey[900],
        body: Column(
          children: [
            AnimatedTextKit(
              animatedTexts: [
                TyperAnimatedText(
                    "Greetings Newcomer",
                    speed: Duration(milliseconds: 75),
                    textStyle: TextStyle(
                      color: Colors.green[800],
                      fontFamily: "RobotoMono",
                      fontSize: 30.0,
                    )
                ),
                TyperAnimatedText(
                    "I am an anonymous figure assigned to give two paths to every person that enters",
                    speed: Duration(milliseconds: 75),
                    textStyle: TextStyle(
                      color: Colors.green[800],
                      fontFamily: "RobotoMono",
                      fontSize: 30.0,
                    )
                ),
                TyperAnimatedText(
                    "It's time for you to choose your path",
                    speed: Duration(milliseconds: 75),
                    textStyle: TextStyle(
                      color: Colors.green[800],
                      fontFamily: "RobotoMono",
                      fontSize: 30.0,
                    ),
                )
              ],
              isRepeatingAnimation: false,
            ),
            SizedBox(height: 100.0,),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: Text(""),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue
                  ),
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: Text(""),
                  style: ElevatedButton.styleFrom(
                      primary: Colors.red
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

animated_text_ket 为每种类型的动画文本提供了 onFinished 回调，您可以使用它来检测动画状态

因此，在您的小部件中，您可以将其用作

/// indicates the status to show or hide the buttons
_showButtons = false;

TyperAnimatedText(
      "Greetings Newcomer",
      speed: Duration(milliseconds: 75),
      textStyle: TextStyle(
      color: Colors.green[800],
      fontFamily: "RobotoMono",
      fontSize: 30.0,
      onFinished: () {
       // show the buttons / do any operation
       _showButtons = true;
       setState({});
      }
)

if(_showButtons)
     Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text(""),
              style: ElevatedButton.styleFrom(
                primary: Colors.blue
              ),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text(""),
              style: ElevatedButton.styleFrom(
                  primary: Colors.red
              ),
            ),
          ],
        )

一旦 animatedText 在 flutter 中完成动画，如何更改按钮的可见性

how do I change the visibility of a button once animatedText finished the animation in flutter

dart

flutter

flutter-animation