Implementing Splash Screen in Flutter

Nowadays, Splash screen is basic need of every mobile app. In this article, I will describe you to how add splash screen to your Flutter application.

They say, first impression is the last! Yep, truly for any amazingly crafted application, it’s easier to start impressing your audience with a good start — the splash screen! - Nikita Gandhi

For folks who don’t know what is splash screen: A splash screen is a graphical control element consisting of a screen containing an image, a logo, and the current version of the software. A splash screen can appear while a program/app is launching. In other words, Splash Screen is the first screen visible to the user when the application’s launched.

Every time a flutter application is started, it takes some time to load the Dart isolate (which runs the code). This means user will see a blank white screen till Flutter renders the first frame of the application.

To overcome this issue, use “splash_screen_view” flutter lib package.

What is splash_screen_view?

splash_screen_view flutter lib is use to automatically generates android, iOS, and Web native code for customising this native splash screen background color and splash image. Supports dark mode, full screen, and platform-specific options.

The native splash screen is displayed till Flutter renders the first frame of the application. After that you have to load your real splash screen.

This package also contains a collection of Splash Screen example for your application to display logo and different style of text.

Let’s build a splash screen from scratch.

Getting Started!

1. Installing

Add this to your package’s pubspec.yaml file.

dependencies:
  splash_screen_view: ^3.0.0

You can install packages from the command line:

flutter packages get

2. Setting the splash screen view

Customised the following settings and add to your project’s pubspec.yaml file.

splash_screen_view:
  # Use color to set the background of your splash screen to a solid color.
  # Use background_image to set the background of your splash screen to a png image.
  # This is useful for gradients. The image will be stretch to the  size of the app.
  # Only one parameter can be used, color and background_image cannot both be set.

  color: "#ffffff"
  #background_image: "assets/splashscreen_image.png"

  # Optional parameters are listed below.
  image: assets/splashscreen_image.png

  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  #android: false
  #ios: false
  #web: false

  #android_gravity: center
  #ios_content_mode: center
  #web_image_mode: center

  #fullscreen: true

  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

3. Run the package

After adding your settings, run the following command in the terminal:

flutter pub run splash_screen_view:create

When the package finishes running, your splash screen is ready.

Usage of splash screen view

Import it

Now in your Dart code, you can use:

import 'package:splash_screen_view/SplashScreenView.dart';

1. Simple Logo

SplashScreenView(
      navigateRoute: SecondScreen(),
      duration: 3000,
      imageSize: 130,
      imageSrc: "logo.png",
      backgroundColor: Colors.white,
    );

[Where]:

• navigateRoute (required)- Name of target screen which you want to display after completion of splash screen milliseconds.
• duration — Delay between the splash screen and target screen. Provider Duration in millisecond.
• imageSrc — Assets path for your logo which your want to display on splash screen.
• imageSize — Size of your logo. By default it is 150.
• backgroundColor — Background color of splash screen. By default it is white color.

2. Logo with Text

SplashScreenView(
      navigateRoute: SecondScreen(),
      duration: 3000,
      imageSize: 130,
      imageSrc: "logo.png",
      text: "Splash Screen",
      textType: TextType.NormalText,
      textStyle: TextStyle(
        fontSize: 30.0,
      ),
      backgroundColor: Colors.white,
    ); 

[Where]:

• text — Text which you want to show below logo.
• textType — Gives text type as TextType.NormalText
• textStyle — Gives TextStyle to the text strings. Note: Give imageSrc as blank If you want only text on your splash screen.

3. Colorize Animated Text

SplashScreenView(
      navigateRoute: SecondScreen(),
      duration: 5000,
      imageSize: 130,
      imageSrc: "logo.png",
      text: "Splash Screen",
      textType: TextType.ColorizeAnimationText,
      textStyle: TextStyle(
        fontSize: 40.0,
      ),
      colors: [
        Colors.purple,
        Colors.blue,
        Colors.yellow,
        Colors.red,
      ],
      backgroundColor: Colors.white,
    );

[Where]:

• textType — Gives text type as TextType.ColorizeAnimationText
• colors — Set the colors for the gradient animation of the text. Give List with values of [Color] in it. Note: colors list should contains at least two values

4. Scale Animated Text

SplashScreenView(
      navigateRoute: SecondScreen(),
      duration: 3000,
      imageSize: 130,
      imageSrc: "logo.png",
      text: "Splash Screen",
      textType: TextType.ScaleAnimatedText,
      textStyle: TextStyle(
        fontSize: 30.0,
      ),
      backgroundColor: Colors.white,
    );

[Where]:

• textType — Gives text type as TextType.ScaleAnimatedText

5. Typer Animated Text

SplashScreenView(
      navigateRoute: SecondScreen(),
      duration: 3000,
      imageSize: 130,
      imageSrc: "logo.png",
      text: "Splash Screen",
      textType: TextType.TyperAnimatedText,
      textStyle: TextStyle(
        fontSize: 30.0,
      ),
      backgroundColor: Colors.white,
    );

[Where]:

• textType — Gives text type as TextType.TyperAnimatedText

6. Page Route Behaviors

Defines standard behaviors when transitioning between routes (or screens). Sometimes, though, a custom transition between screens can make an app more unique.

Support of page route behaviors:

• pageRouteTransition: PageRouteTransition.Normal
• pageRouteTransition: PageRouteTransition.CupertinoPageRoute
• pageRouteTransition: PageRouteTransition.SlideTransition

This was the final code and we are done with the splash screen view implementation.

Final demo of splash screen view:

Removing splash screen setting

If you would like to restore Flutter’s default white splash screen, run the following command in the terminal:

flutter pub run splash_screen_view:remove

Flutter lib package: https://pub.dev/packages/splash_screen_view

Github code: https://github.com/SandipVKalola/splash_screen

If you found this article helpful then do clap as much as you can. Thanks for reading.

Happy Coding.