Native Splash Screen in Flutter

One of the thing that I experienced while building flutter application is a white blank screen that appears when an application starts. To me is very annoying and I do known that it does not bring good user experience. This can be frustrating for users and can make your app feel unprofessional.

But the good news is that you can remove the blank white screen and display an image or logo just like other apps that we use in our daily activities.

In this article we will be using a package known flutter_native_splash to display a custom splash screen when our apps starts.

What is a Splash Screen?

A splash screen in mobile applications is a graphical element that appears when you launch the app. It is usually displayed for a short period, typically a few seconds, while the app is loading its core components and initialising necessary resources in the background. Splash screens serve as an initial branding or introductory screen for the app, providing a smooth and visually appealing transition from the app launch to the main user interface.

Add flutter_native_splash package in our project

Add flutter_native_splash as dependency to your Flutter project.

You can do this by adding the following line in pubspec.yaml

dependencies:
  flutter_native_splash: ^2.3.1

And then run flutter pub get

Setting up Splash Screen

First thing is to add an image that we want it to appear in our splash screen, this can be a logo or any image.

Also do not forget to add the following line is your pubspec.yaml file.

flutter:
    assets:
        - assets/

This will tell Flutter where it can find our images

Now let's start the coolest part

You need to configure flutter_native_splash to use the image for the splash screen.

Inside you're pubspec.yaml add flutter_native_splash with following configuration

flutter_native_splash:
  # Background color of splash screen
  color: "#ffffff"
  # Image that you want to show
  image: assets/splash.png
  # Sizing of image
  fill: true
  # Splash Image to show in dark mode (Optional)
  image_dark: assets/splash_dark.png
  # Background color of dark mode (Optional)
  color_dark: "#000000"

Also make sure you do not add this configs under flutter section.

But wait!!! one more step.

Run the following command so that flutter_native_splash package can do it's magic 🪄

flutter pub run flutter_native_splash:create

And that's it, now your user will have an amazing experience when they click your app 🥳.