How to build Animated splash screen with Getx? - flutter

Question

I am confused about this. I Don't know how to update the value to animate the image in the splash screen. With the stateful widget class we call setState(() {}); inside the listener to update the value. But, How do I achieve it with the Getx?
Animation with Stateful Widget :
animationInitilization() {
animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
animation =
CurvedAnimation(parent: animationController, curve: Curves.easeOut);
animation!.addListener(() {
setState(() {});
});
animationController.forward();
}
Animation with Getx:
Splash Screen :
class SplashScreen extends StatelessWidget {
const SplashScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
SplashScreenViewModel splashScreenViewModel =
Get.put(SplashScreenViewModel());
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/images/logo.png',
width: splashScreenViewModel.animation.value * 200,
height: splashScreenViewModel.animation.value * 200,
),
],
),
],
),
);
}
}
Getx Controller :
class SplashScreenViewModel extends GetxController
with GetSingleTickerProviderStateMixin {
late AnimationController animationController;
late Animation<double> animation;
#override
void onInit() {
animationInitilization();
super.onInit();
}
animationInitilization() {
animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
animation =
CurvedAnimation(parent: animationController, curve: Curves.easeOut)
.obs
.value;
animation.addListener(() => update());
animationController.forward();
}
}

Answer 1

Nice animation for SplashScreen bro.
I recommend using GetBuilder() to make it work properly:
class SplashScreen extends StatelessWidget {
const SplashScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: GetBuilder<SplashScreenViewModel>(
init: SplashScreenViewModel(),
builder: (controller) {
return Stack(
fit: StackFit.expand,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/images/logo.png',
width: controller.animation.value * 200,
height: controller.animation.value * 200,
),
],
),
],
);
},
),
);
}
}