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
),
),
],
)
],
),
),
);
}
}
CodePudding user response:
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
),
),
],
)