Execute animation when button clicked flutter - flutter

Question

I am creating a flutter web where is created home and about widget in column and uses SlideTransition on about widget but the thing is when the page load the animation happen even I am on Home widget.
I want when i click on about widget then the animation will occur not at the start of page.
how to do that?
Here is my code:
class MainPage extends StatefulWidget {
const MainPage({super.key});
#override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> with TickerProviderStateMixin {
bool aboutClick = false;
bool servicesClick = false;
bool contactClick = false;
final fname = TextEditingController();
final lname = TextEditingController();
final email = TextEditingController();
final phoneNo = TextEditingController();
final message = TextEditingController();
final emailVerificationSyntax = RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+#[a-zA-Z0-9]+\.[a-zA-Z]+");
final homeKey = GlobalKey();
final aboutKey = GlobalKey();
final servicesKey = GlobalKey();
final contactKey = GlobalKey();
AnimationController? animationController;
Animation<Offset>? _animationValue;
#override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
)..forward();
_animationValue = Tween<Offset>(
begin: const Offset(-0.5, 0.0), end: const Offset(0.0, 0.0))
.animate(
CurvedAnimation(
parent: animationController!,
curve: Curves.easeIn,
),
);
// animationController!.addStatusListener((status) {
// if (status == AnimationStatus.completed) {
// animationController!.reverse();
// } else if (status == AnimationStatus.dismissed) {
// animationController!.forward();
// }
// });
// animationController!.forward();
}
#override
void dispose() {
animationController!.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return MediaQuery.of(context).size.width <= 910
? const MobileMainPage()
: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
toolbarHeight: 100,
flexibleSpace: Container(
color: Colors.black,
width: double.infinity,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RichText(
textScaleFactor: 1.3,
text: const TextSpan(
style: TextStyle(
color: Colors.black,
fontSize: 25,
),
children: <TextSpan>[
TextSpan(
text: "Rizwan",
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold,
fontFamily: "Joining",
),
),
TextSpan(
text: " •",
style: TextStyle(
fontSize: 50,
color: Colors.green,
fontWeight: FontWeight.bold,
fontFamily: "Joining",
),
),
],
),
),
Row(
children: [
TextButton(
onPressed: () {
Scrollable.ensureVisible(homeKey.currentContext!,
duration: const Duration(seconds: 2),
curve: Curves.ease);
},
style: TextButton.styleFrom().copyWith(
animationDuration:
const Duration(milliseconds: 300),
textStyle: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.hovered)) {
return const TextStyle(
fontSize: 35,
);
}
return const TextStyle(
fontSize: 30,
);
},
),
foregroundColor:
MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.hovered)) {
return Colors.green;
}
return Colors.white;
})),
child: const Text(
"Home",
style: TextStyle(
fontFamily: "Simple",
),
),
),
const SizedBox(
width: 10,
),
TextButton(
onPressed: () {
Scrollable.ensureVisible(aboutKey.currentContext!,
duration: const Duration(seconds: 2),
curve: Curves.ease);
setState(() {
aboutClick = true;
});
},
style: TextButton.styleFrom().copyWith(
animationDuration:
const Duration(milliseconds: 300),
textStyle: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.hovered)) {
return const TextStyle(
fontSize: 35,
);
}
return const TextStyle(
fontSize: 30,
);
},
),
foregroundColor:
MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.hovered)) {
return Colors.green;
}
return Colors.white;
})),
child: const Text(
"About",
style: TextStyle(
fontFamily: "Simple",
),
),
),
],
),
],
),
),
),
body: SingleChildScrollView(
child: Column(
children: [
homeWidget(homeKey),
aboutWidget(aboutKey, _animationValue),
servicesWidget(servicesKey),
contactWidget(contactKey, fname, lname, email, phoneNo,
message, emailVerificationSyntax)
],
),
),
);
}
homeWidget(GlobalKey<State<StatefulWidget>> homeKey) {
return Row(
key: homeKey,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 160,
),
const Text(
"Hi, I am",
style: TextStyle(
color: Colors.white,
fontSize: 60,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 10,
),
const Text(
"RIZWAN ALI",
style: TextStyle(
color: Colors.white,
fontSize: 70,
fontWeight: FontWeight.bold,
fontFamily: "Shade",
),
),
const SizedBox(
height: 10,
),
DefaultTextStyle(
style: const TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.grey),
child: AnimatedTextKit(
pause: const Duration(seconds: 1),
repeatForever: true,
animatedTexts: [
TypewriterAnimatedText(
'Flutter Developer',
speed: const Duration(
milliseconds: 90,
),
curve: Curves.linear,
),
TypewriterAnimatedText(
'Android Native Developer',
speed: const Duration(
milliseconds: 90,
),
curve: Curves.linear,
),
TypewriterAnimatedText(
'Web Developer',
speed: const Duration(
milliseconds: 90,
),
curve: Curves.linear,
),
TypewriterAnimatedText(
'Freelancer',
speed: const Duration(
milliseconds: 90,
),
curve: Curves.linear,
),
TypewriterAnimatedText(
'Photographer',
speed: const Duration(
milliseconds: 90,
),
curve: Curves.linear,
),
TypewriterAnimatedText(
'Cricketer',
speed: const Duration(
milliseconds: 90,
),
curve: Curves.linear,
),
],
),
),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(20),
shape: const StadiumBorder(),
backgroundColor: Colors.green,
),
child: const Text(
"Download CV",
style: TextStyle(
fontSize: 40,
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 70.0),
child: Container(
width: 450,
height: 450,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("me.jpg"),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
),
],
);
}
aboutWidget(GlobalKey<State<StatefulWidget>> aboutKey,
Animation<Offset>? animationValue) {
return SlideTransition(
position: animationValue!,
child: Padding(
key: aboutKey,
padding: const EdgeInsets.only(top: 80.0),
child: SizedBox(
height: 600,
width: double.infinity,
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
"ABOUT",
style: TextStyle(
color: Colors.white,
fontSize: 35,
fontWeight: FontWeight.bold,
fontFamily: "Simple",
),
),
const SizedBox(
height: 20,
),
SizedBox(
width: 700,
height: 100,
child: Wrap(
children: const [
Text(
"I'm a Flutter and Android Native Developer building Applications that leads to the success of the overall product. Check out some of my work in the Work section. I also like sharing content related to the stuff that I have learned in Flutter Development so it can help other people of the Dev Community. Feel free to Connect or Follow me on my Linkedin where I post useful content related to Web Development and Programming. I'm open to Job opportunities where I can contribute, learn and grow. If you have a good opportunity that matches my skills and experience then don't hesitate to contact me.",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
)
],
),
),
const SizedBox(
height: 120,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Color.fromARGB(221, 49, 40, 40),
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
child: Center(
child: Container(
width: 15,
height: 15,
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
),
),
),
const SizedBox(
width: 200,
),
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Color.fromARGB(221, 49, 40, 40),
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
child: Center(
child: Container(
width: 15,
height: 15,
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
),
),
),
const SizedBox(
width: 200,
),
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Color.fromARGB(221, 49, 40, 40),
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
child: Center(
child: Container(
width: 15,
height: 15,
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
),
),
),
const SizedBox(
width: 200,
),
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Color.fromARGB(221, 49, 40, 40),
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
child: Center(
child: Container(
width: 15,
height: 15,
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
),
),
),
],
),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Name",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 200,
),
Text(
"Email",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 180,
),
Text(
"Linkedin",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 180,
),
Text(
"Phone",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 20,
),
const Text(
"RIZWAN ALI",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
const SizedBox(
width: 90,
),
const Text(
"rizwanali96960#gmail.com",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
const SizedBox(
width: 50,
),
TextButton(
onPressed: () async {
final url = Uri.parse(
"https://www.linkedin.com/in/rizwan-ali-361514212");
if (await canLaunchUrl(url)) {
await launchUrl(
url,
);
}
},
child: const Text(
"Linkedin-Profile",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
const SizedBox(
width: 90,
),
const Text(
"[phone]",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
],
),
const SizedBox(
height: 45,
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(15),
shape: const StadiumBorder(),
backgroundColor: Colors.green,
),
child: const Text(
"LET'S TALK",
style: TextStyle(
fontSize: 35,
),
),
),
],
),
),
),
),
);
}

Answer 1

You should not start the animation during initState, if you don't want the animation to play right away.
In your code:
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
)..forward(); // <----- REMOVE THIS PART
In your code above, you should remove the ..forward() during the initialization. This will prevent it to run at the start of the page.
Next, in the button click event, you can call animationController.forward() and it should begin the animation. You can also specify a starting point, e.g. animationController.forward(from: 0), to ensure the animation always starts at the very beginning.