May 06, 2023

Flutter Splash Screen (Native Splash)

A Flutter splash screen is a screen that is initially displayed to users before the application has fully launched. This post explains how to add a Flutter loading screen to a Flutter app in a simple and easy way.

Flutter Splash Screen

A Flutter splash screen is the screen the user sees while the Flutter app is initializing and loading. This Flutter launch screen is typically the first impression of the app displayed while the application has not loaded yet. In this post, we are going to show how to add a Flutter native splash screen in simple steps.

 

Why is a Flutter Splash Screen Used?

This loading screen of Flutter during app launch is used mainly for the following purposes:

  • App Branding: For showing the logo, name or other branding elements of the company or app.
  • Improved Loading Activity:  Giving the app the time that it needs to load essential resources in the background that are required for the app to run.
  • Better User Experience: With a Flutter splash screen, the user can see some activity in progress, which gives a signal to the user to wait until the process is complete.
  • Better Impression: It is a good practice to display an initial screen instead of a blank screen page while the app is still loading.
 

How to Add Flutter Native Splash Screen

To add a Flutter launch screen, you can either use a Flutter package or add the screen manually by changing the Android and IOS platform configurations. In this post, we will add the Flutter native startup screen manually in simple and easy steps without using a Flutter package. Steps to add a launch screen for Flutter Android and IOS are as follows:

 

Android: Setup Splash Screen in Flutter

Adding an Android splash screen involves changing a few files and adding a launch image to specific directories. Steps to add Flutter Android startup screen are: 

Step 1: Add Splash Screen Image to Directories

First, we need to add images for the splash screen to the relevant directories that will be used in our Android configuration files. Remember to keep images lightweight and avoid long-running tasks in the startup screen.

  • Navigate to the directory android/app/src/main/res/ in the Flutter project directory.
  • Then add the images for different screen sizes in the respective directories. The directories that the launch images need to be saved in are mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, and mipmap-xxxhdpi.

Step 2: Create or Modify Drawable XML for Launch Background

Next, we need to set the source of the image that should be used in our launch screen by changing the drawable XML file. 

  • Navigate to the directory android/app/src/main/res/drawable.
  • Open the file launch_background.xml or create an XML with that filename if it does not already exist.
  • The content should be something like in the snippet below, where android:src is the location of the launch image.
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
    <item
        android:width="300dp"
        android:height="53dp"
        android:gravity="center">
        <bitmap
            android:gravity="fill|center"
            android:src="@mipmap/launch_image" />
    </item>
</layer-list>

Step 3: Set Launch Theme in Styles XML

Next, we need to add some theme styling for our launch screen. To modify the splash screen theme, follow these steps:

  • Navigate to the directory android/app/src/main/res/values/ in the Flutter project directory.
  • Open the file styles.xml or create one with the same name if it is missing.
  • Next, define the android:windowBackground, which points to the drawable XML file we modified earlier.

The content of styles.xml should look something like in the snippet below:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

Step 4:  Apply Launch Theme in AndroidManifest XML

Next, we need to ensure the launch theme is applied in our Android manifest XML file. Follow these steps to apply the splash launch theme in the Android manifest file:

  • Navigate to the directory android/app/src/main/ in the Flutter project.
  • Open the AndroidManifest.xml file in that directory.
  • Make sure android:theme attribute has the value @style/LaunchTheme.

The content of the Android manifest should look something like:

<activity
    android:name=".MainActivity"
    android:theme="@style/LaunchTheme"
    android:exported="true"
    android:launchMode="singleTop"
    android:configChanges="orientation|screenSize|keyboardHidden"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>
 

IOS: Set Up Splash Screen in Flutter

Adding a Flutter splash screen for IOS is simpler than setting up for Android. We need to just add or replace the launch images in a specific directory. To add a Flutter splash screen for IOS, follow these steps:

  • Navigate to the directory ios/Runner/Assets.xcassets/LaunchImage.imageset/ of the Flutter project.
  • Put the launch images there with these exact names LaunchImage, LaunchImage@2x, LaunchImage@3x.
  • Navigate to the directory ios/Runner/ of the Flutter project.
  • Open the file Info.plist and make sure the following launch key/string pair is present.
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>

We just demonstrated how to add a Flutter native splash screen for Android and IOS without using any package. An important thing to remember is to keep the launch screen lightweight and avoid running long tasks in the loading screen. The native startup screen immediately shows when the Flutter app is launched and then Flutter takes over after loading essential modules.

Home