How to add splash screen with animated logo in flutter

Here I try to understand, how to add a splash screen with animated logo in flutter. here we will use getx as a state management.

first implement your GetxController with GetSingleTickerProviderStateMixin to define the animation controller.

class SplashController extends GetxController
 
with GetSingleTickerProviderStateMixin {}

Define the AnimationController inside your controller class

late final AnimationController controller = AnimationController(
    duration: const Duration(seconds: 4),
    vsync: this,
  )..repeat(reverse: false);
  late final Animation<double> animation = CurvedAnimation(
    parent: controller,
    curve: Curves.easeInOutCubicEmphasized,
  );

Now define the some observable variables to reflect the changes.

RxDouble topMargin = 10.0.obs;
  RxDouble rightMargin = (Get.width / 2).obs;
  RxDouble leftMargin = (Get.width / 2).obs;
  Rx<Curve> logoAnimationCurve = Curves.fastOutSlowIn.obs; 

Now we can use AnimatedPositioned widget to animate the logo, its provide different curves property to animate as per our requirements. so put the below code in your UI class.

AnimatedPositioned(
            top: controller.topMargin.value,
            right: controller.rightMargin.value,
            left: controller.leftMargin.value,
            duration: Duration(seconds: 2),
            curve: controller.logoAnimationCurve.value,
            onEnd: ()=>Get.toNamed(Routes.HOME),
            child: SvgPicture.asset("Enter_your_logo_path")
          ));

you can use here any widget like picture(svg,jpg,png), container, shape.

Then now to animate your logo with required speed and curve put Future delay inside your onInit() method of splash screen controller class. so it is start to animate your logo immediate after splash screen controller initialize.

 @override
  void onInit() {
    super.onInit();

    Future.delayed(Duration(seconds: 1), () {
      print("FIRST ANIMATION");
      topMargin(Get.height/3);
      leftMargin(10);
      rightMargin(10);
    }).whenComplete(() => Future.delayed(Duration(milliseconds: 1800), () {
      print("SECOND ANIMATION");
      logoAnimationCurve(Curves.fastLinearToSlowEaseIn);
      topMargin(Get.height / 6);
      leftMargin(50);
      rightMargin(50);
    }));

can put here specific time, curve type and margin as per your requirements of animation you wants.

Here full code of view.dart

class SplashView extends GetView<SplashController> {
  const SplashView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(51, 177, 112, 1),
      body: Stack(
        children: [
          Obx(() => AnimatedPositioned(
            top: controller.topMargin.value,
            right: controller.rightMargin.value,
            left: controller.leftMargin.value,
            duration: Duration(seconds: 2),
            curve: controller.logoAnimationCurve.value,
            onEnd: ()=>Get.toNamed(Routes.HOME),
            child: SvgPicture.asset("Enter_your_logo_path_here")
          ))
        ],
      )
    );
  }
}

Here full code of controller.dart

class SplashController extends GetxController
    with GetSingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    duration: const Duration(seconds: 4),
    vsync: this,
  )..repeat(reverse: false);
  late final Animation<double> animation = CurvedAnimation(
    parent: controller,
    curve: Curves.easeInOutCubicEmphasized,
  );

  var refreshString = "".obs;

  //RxDouble logoScale = 50.0.obs;
  RxDouble topMargin = 10.0.obs;
  RxDouble rightMargin = (Get.width / 2).obs;
  RxDouble leftMargin = (Get.width / 2).obs;
  Rx<Curve> logoAnimationCurve = Curves.fastOutSlowIn.obs;

  @override
  void onInit() {
    super.onInit();

    Future.delayed(Duration(seconds: 1), () {
      print("FIRST ANIMATION");
      topMargin(Get.height/3);
      leftMargin(10);
      rightMargin(10);
    }).whenComplete(() => Future.delayed(Duration(milliseconds: 1800), () {
      print("SECOND ANIMATION");
      logoAnimationCurve(Curves.fastLinearToSlowEaseIn);
      topMargin(Get.height / 6);
      leftMargin(50);
      rightMargin(50);
    }));

  }

}

OUTPUT :