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(
"+92 307 4500296",
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,
),
),
),
],
),
),
),
),
);
}
