Sliding fading animation in flutter - flutter

Question

I am trying to achieve the following result in one of my app in flutter.
But I cannot figure out how to animate the "SKYGOAL" text that comes fading and sliding.
I've animated the rest of the components using AnimatedContainer or AnimatedOpacity, but I've been stuck on this one. I am new to animations so I don't know much.
Any help would be useful.
Thank you!
My current related snippet is :
class SplashScreen1 extends StatefulWidget {
const SplashScreen1({Key? key}) : super(key: key);
#override
State<SplashScreen1> createState() => _SplashScreen1State();
}
class _SplashScreen1State extends State<SplashScreen1> with SingleTickerProviderStateMixin {
double _skygoalLogoOpacity = 0;
double _syjOpacity = 0;
double _skygoalTextWidth = 0;
#override
void initState() {
// TODO: implement initState
super.initState();
Future.delayed(const Duration(seconds: 0)).then((value) => setState(() {
_skygoalLogoOpacity = 1;
_syjOpacity = 1;
_skygoalTextWidth = 2000;
}));
Future.delayed(const Duration(milliseconds: 4800)).then((value) => Navigator.pushReplacement(context, AnimatedPageRoute(SplashScreen2())));
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Color(0xFF0E3C6E),
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(height: 250,),
Stack(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.white
),
height: 185,
width: 185,
),
AnimatedOpacity(
duration: const Duration(milliseconds: 1000),
opacity: _skygoalLogoOpacity,
child: Container(
padding: EdgeInsets.only(top: 20),
child: Image.asset("assets/images/skygoal-logo.png"),
// height: 135,
width: 164,
),
),
],
),
Stack(
children: [
AnimatedOpacity(
duration: const Duration(milliseconds: 2000),
opacity: _syjOpacity,
child: Container(
margin: EdgeInsets.only(left: 40, top: 37),
height: 29,
width: 153,
child: Image.asset("assets/images/start-your-journey.png"),
),
),
Container(
margin: EdgeInsets.only(top: 5,left: 20),
child: Text(
"SKYGOAL",
style: GoogleFonts.poppins(
fontSize: 30,
fontWeight: FontWeight.w800,
color: Colors.white
),
textAlign: TextAlign.center,
),
),
],
),
Spacer(),
Text(
"By Skygoal",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 13
),
),
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)
),
height: 5,
width: 134,
)
],
),
),
);
}
}

Answer 1

You can use animated_text_kit's fade animation
Example and result from doc
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
child: AnimatedTextKit(
animatedTexts: [
FadeAnimatedText('SKYGOAL'),
],
),
),
);