Splash Screen Flutter Tutorial

When you open an app, there is a brief time while the native app loads Flutter. Every app requires initialization time while the operating system sets up the app’s process. During this time, the native app displays a white splash screen by default.

Splash screen (or launch screen) is a start screen which contains an image, logo, and current version of the app. In other words, it’s the first screen that an app displays every time it’s loading. it’s considered as a welcome or an introductory screen that provides a simple initial experience when the app is starting.

Table of Contents

• Why is splash screen used?
• How to add splash screen in Flutter apps?
• Native Splash Screen
• Splash Screen With Animation
• Conclusion

Why is splash screen used?

Splash screen is used for various purposes including but not limited to:

1. branding and identity recognition

2. indication of loading progress

How to add splash screen in Flutter apps?

There are 3  methods that you can use to implement splash screen in your Flutter apps. Each method has its own characteristics and implementation.

1. Native splash screen:  the easiest way to add a simple splash screen using a plugin. It simply consists of background color/image and a splash image.

2. animated splash screen: allows you to create a splash screen with more advanced features than native splash screen. These features include splash animation and page transition animation.

3. custom splash screen: you can build your own splash screen and implement it with your own design and features.

In this tutorial, we’ll learn how to create a native splash screen as well as animated splash screen using 2 methods. So without further ado, let’s start splashing right now!

Native Splash Screen

Native splash screen is pretty simple as it doesn’t consist of complicated characteristics. It simply contains a splash image, background color or background image. This package automatically generates iOS, Android, and web native code for customizing the native splash screen background color and image.

Native splash screen has to be implemented natively and cannot be implemented with dart code. Well, what does this mean? This means that we’ll be doing everything inside pubspec.yaml file and we won’t be customizing the splash screen using dart.

The first thing we need to do is to add the native splash screen package in our app project.

To do that, run the following command in the terminal

flutter pub add flutter_native_splash

Or, add it manually in the dependencies section as the following

dependencies:
  flutter_native_splash: ^2.2.14

Then, run the pub get

flutter pub get

Create the splash screen

Create an asset folder in the root of your project and add the images which you want to use as your splash and background. (Don’t forget to specify the assets folder in pubspec.yaml under asset section).

In the same file, pubspec.yaml, add a new section called flutter_native_splash. After that, we’ll customize the splash screen setting as the following

flutter_native_splash:
  image: assets/splash.png
  background_image: 'assets/background.png'
  android: true
  ios: true

Once the customization is done, we need to run the following 3 commands in order to create the splash screen

1. flutter run

2. flutter pub get

3. flutter pub run flutter_native_splash:create

When the package finishes running after the last command, the splash will be ready. All we need to do now is to run the app to view our splash screen

Output

Splash Screen With Animation

Animated Splash screen is characterized by the ability to be customized and animated. It allows you to add transition effects to the widgets within the screen. There are 2 methods to create a splash screen with Animation which are animated splash screen package and lottie package.

Animated Splash Screen

Animated splash screen package allows you to create a custom widget to be displayed as your splash. In addition, it provides you with customization properties to further control the splash screen and add the transition effects.

Let’s add the package to our project

flutter pub add animated_splash_screen

Then, create a new dart file and import the following libraries

import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:page_transition/page_transition.dart';

After that, create a stateless widget that returns an AnimatedSplashScreen in its build method.

@override
Widget build(BuildContext context) {
  return AnimatedSplashScreen(
      splashIconSize: 250,
      splash: Column(
        children: [
          Image.asset('assets/splash.png',width: 250, height: 200,),
          const Text(
            'Animated Splash',
            style: TextStyle(
            fontSize: 40,
            fontWeight: FontWeight.bold,
            color: Colors.white,

          ),),
        ],
      ),
      backgroundColor: Colors.deepPurple.shade100,
      splashTransition: SplashTransition.rotationTransition,
      pageTransitionType: PageTransitionType.fade, //by default it's bottom to top
      animationDuration: const Duration(seconds: 3),
      duration: 5000,
      nextScreen: const Home()
  );
}

Properties Explanation

• splash: the widget to be displayed withing the splash screen. This can be any widget you choose.
• splashIconSize: defines the size of the icon displayed within the splash.
•  
• splashTranstion: specifies the animation to apply to the splash widget.
• pageTransitionType: specifies the animation to be applied to the page when the splash is removed and next screen is being displayed.
• duration: specifies the duration which the splash will continue to appear for
• nextScreen: the next screen to be displayed when the splash screen is removed.

Output

Lottie Animated Splash Screen

Lottie is a library for both Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile.

First, add the package to the project

flutter pub add lottie

Then, let’s visit lottieFiles website to choose and download the lottie animation we want to use. Note that you need to register and sign in to be able to get the animation file.

For this tutorial, I will be using the avocado fruit exercise animation. Click on the animation you want to use and browse the settings. You will find that there are different downloadable formats that you can use. We’ll use json format.

You can also find customization settings below where you can change the colors, animation speed, etc

Once done with customization, download the animation in JSON format and add it to the assets folder within your project.

Next, import the following library in the dart file where you want to implement the splash screen

import 'package:lottie/lottie.dart';

create a stateless widget that returns an AnimatedSplashScreen same as the previous example. Note that you can use the same exact code but with some modification to the splash property

Now, let’s specify the splash property as the following:

@override
Widget build(BuildContext context) {
  return AnimatedSplashScreen(
      splashIconSize: 250,
      splash: Lottie.asset('assets/avocado.json'),
      backgroundColor: Colors.yellow,
      splashTransition: SplashTransition.rotationTransition,
      pageTransitionType: PageTransitionType.fade, //by default it's bottom to top
      animationDuration: const Duration(seconds: 1),
      duration: 5000,
      nextScreen: const Home()
  );
}

Output

Conclusion

Now it can be seen that splash screen is useful to add to your app for various purposes including branding and progress indication. We learnt in this tutorial different methods to create splash screen including native splash screen and animated splash screen. You can get the source code from github and browse the branches to access each part individually.

In future posts, we’ll discuss how to create your custom splash screen without using any external package.

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!