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

user_15462319 0
Viewed 118

so I am doing a new flutter project where a person picks a path and then follows along that path, and to make it look fun, The text would be animated and then two buttons show up to pick the path. However, it's my first time using animated_text_kit and I don't know how to make the button show once the animation is finished. So my question is, does anyone know how? btw here's the code

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
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
flutter-animation dart flutter
1 Answers

The animated_text_ket has the onFinished callback for each type of animated texts that you could use to detect the animation status

So, in your widget, you could use it as

/// 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
              ),
            ),
          ],
        )
user_46398940
Related