fade growing animation 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 try animated_text_kit fade transition.
Example from doc
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
child: AnimatedTextKit(
animatedTexts: [
FadeAnimatedText( "SKYGOAL"),
],
onTap: () {
print("Tap Event");
},
),
),
);

Answer 2

I dont know whether it is the correct solution or not, But you can try something like this . I created a stack and its first child is the text and the other child is a container with boxShadow . Have a look at this.
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key,}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
MediaQueryData mediaQueryData = MediaQuery.of(context);
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: mediaQueryData.size.width,
width: mediaQueryData.size.width,
child: ColoredBox(
color: Colors.yellowAccent,
child: Stack(
alignment: Alignment.centerRight,
children: [
Container(
width: mediaQueryData.size.width,
height: 80,
alignment: Alignment.center,
child: Text(
'Hello World',
style: TextStyle(
fontSize: mediaQueryData.textScaleFactor * 50,
),
),
),
TweenAnimationBuilder(
tween: Tween<double>(
end: 0,
begin: 1,
),
duration: const Duration(
seconds: 5,
),
builder: (context, double tween, _ ){
return Container(
//alignment: Alignment.centerRight,
height: 50, //mediaQueryData.size.width,
width: mediaQueryData.size.width * tween,
decoration: const BoxDecoration(
color: Colors.yellowAccent,
boxShadow: [
BoxShadow(
blurRadius: 80,
spreadRadius: 30,
color: Colors.yellowAccent,
),
]
),
);
},
)
],
),
),
)
],
),
),
);
}
}