How To Create Animated Splash Screen in Flutter

I’ve previously mentioned that during the time of app’s initialization process, the native app displays a white splash screen by default.

In the previous post, we’ve discussed how to create splash screen using built-in libraries such as native splash screen and animated splash screen.

Today, we’ll discuss how to create animated splash screen in Flutter which you will fully customize up to your desire. We’ll design design the splash screen step by step and create animation gestures to make it even more exciting.

Creating your custom splash screen removes restriction that you might face when using built-in library. These restrictions mainly includes sticking to a standard design that usually consists of an image with a text. Today, we’ll use our creativity to come up with something fantastic. Not to mention that we won’t be using any built-in library today.

So, without further ado, let’s jump into our tutorial!

Custom splash screen flutter example.

First of all, create a new dart file SplashScreen with a stateful widget that returns a Scaffold widget.

We’ll create the following things in order to control the movement and animation of the elements within the splash screen.

•  boolean variable: animate
• control function: startAnimation()

bool animate = false;

Future startAnimation() async {
  await Future.delayed(const Duration(milliseconds: 500)); 
  setState(() {
    animate = true;
  });

  await Future.delayed(const Duration(milliseconds: 5000)); 
  Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Home()));

}

What this function simply does is that it delays for 0.5 second and set the animate variable to true. Afterwards, it delays for 5 seconds then redirects the user to the home screen. During this time, the animation will take place as you’ll see in the next section.

Next we need to call the method we created in the initState method

@override
void initState() {
  startAnimation();
  super.initState();
}

Now the thing you need to do is to get the pictures that you’d like to use in your splash screen. In this example, I will be using a splash image as well as a splash icon.

This is totally up to you and the design that you have in mind. Once you get your pictures ready, add them in a new assets directory in the root of your app project. Then, don’t forget to add the assets section in the pubspec.yaml file as follows. This is a mandatory step as it’s required so the app can locate and use the pictures you add to your project.

assets:
  - assets/

Next, we’ll start creating the UI of the splash screen. We’ll specify the body of the scaffold to be a Stack. This is a widget that takes multiple widgets as its children and allows you to overlay them. We’ll add the elements of the splash screen as the Stack children and position them specifically.

Scaffold(
  body: Stack(
    children:  [],
  ),
);

We’ll use AnimatedPositioned widget to position and animate the elements of the splash screen we’re creating. AnimatedPositioned is similar to Positioned widget with additional animation features. Here yoou can see how we used the animate variable to control the position of the widget. Whenever animate is true, the widget position will be different than when it’s false and this will cause it to move creating an animation gesture.

Let’s create the first AnimatedPositioned with a moving effect from the left corner to the inside of the screen.

AnimatedPositioned(
  top: animate ? 0 : -30,
  left: animate ? 0 : -30,
  duration: const Duration(milliseconds: 2000),
  child: const Image(
    image: AssetImage(tSplashTopIcon),
  ),
),

Next we’ll add another AnimatedPositioned with a Column of two text widgets but this time We’ll use AnimatedOpacity to give a fading effect to the text when it appears to the screen. AnimatedOpacity allows you to add custom opacity for a specific duration of time. Using the animate variable, we can control this duration to give the fading effect to the text element. Beside the fading effect, the AnimatedPositioned will move from left to right.

AnimatedPositioned(
  top: 150,
  left: animate ? defaultSize : -100,
  duration: const Duration(milliseconds: 2000),
  child: AnimatedOpacity(
    duration: const Duration(milliseconds: 2000),
    opacity: animate ? 1 : 0,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(appName, style: TextStyle(fontSize: 24, fontWeight: FontWeight.w400 ),),
        Text(tagline, style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),)
      ],
    ),
  ),
),

Next, we’ll add another element with an image that moves from bottom to top

AnimatedPositioned(
  duration: const Duration(milliseconds: 2000),
  bottom: animate ? 100 : -100,
  child: const Image(
    image: AssetImage(splashImage),
  ),
),

Finally, we’ll add one more element with a container of circular shape that moves from right bottom to top

AnimatedPositioned(
  bottom: 40,
  right: animate ? defaultSize : -40,
  duration: const Duration(milliseconds: 2000),
  child: Container(
    width: splashContainerSize,
    height: splashContainerSize,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(24),
      color: primaryColor,
    ),

  ),
)

Output

Conclusion

This brings an end to our tutorial today where we learned how to create a custom animated splash screen in Flutter weithout using any built-in package. You can get the full source code from GitHub and leave a comment if you have any question!

Please don’t hesitate to support this blog with a like and share if you find its content useful. If you wish to learn more about Flutter programming, you can access a whole Flutter category with plenty of useful topics related to it.

Also, don’t forget to like and share my Facebook page, share the post with those who care to learn, and subscribe to my blog to be one of the firsts to know about my newest posts!

Thank you and happy coding!