May 06, 2023

Flutter Splash Screen (Native Splash)

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

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

 

Why is Flutter Splash Screen Used?

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

  • App Branding: For showing the logo, name or other branding elements of company or app.
  • Improved Loading Activity:  Giving the app time that it needs to load essential resources in background that are required for app to run.
  • Better User Experience: With flutter splash screen user can see something activity in progress which gives signal to user to wait until the progress 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 launch screen for flutter android and IOS are as below:

 

Android: Setup Splash Screen in Flutter

Adding android splash screen involves changing few files and adding 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 splash screen to relevant directories which will use in our android configuration files. Remember to keep images lightweight and avoid long-running tasks in startup screen.

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

Step 2: Create or Modify Drawable XML for Launch Background

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

  • Navigate to 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 snippet below where android:src is the location of 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. In order to modify splash screen theme follow these steps:

  • Navigate to directory android/app/src/main/res/values/ in flutter project directory.
  • Open the file styles.xml or create one with 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 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 splash launch theme in android manifest file:

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

The content of android manifest should look something like in below code snippet:

<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: Setup Splash Screen in Flutter

Adding flutter splash screen for IOS is simpler than setup for android. We need to just add or replace the launch images in specific directory. To add flutter splash screen for IOS follow these steps:

  • Navigate to directory ios/Runner/Assets.xcassets/LaunchImage.imageset/ of flutter project.
  • Put the launch images there with exact these name LaunchImage, LaunchImage@2x, LaunchImage@3x.
  • Navigate to directory ios/Runner/ of 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 flutter native splash screen for android and IOS without using any package. Important thing to remember is to keep launch screen lightweight and avoid running long tasks in loading screen. The native startup screen immediately shows when the flutter app is launched and then flutter takes over after loading essential modules.

Home