Flutter — Splash Screen

3 min readMay 19, 2019

Today, we are going to do the real splash screen in Flutter for both Android and iOS. You may think that all we need to do is create a flutter Widget, right? But it’s not… That is not what the real splash screen behave in Android and iOS!

The purpose of the Splash Screen

The main reason is to hide the application loading from a cold state (Imagine that you need to heat something from the refrigerator before eating). Apart from your business requirement, an application needs to do some initialization, and that time we don’t want the user to feel that an application is freezing, so the splash screen comes in.

However, if you use the flutter widget as a splash screen, it won’t work because the application has not been initialized completely to run and render anything from flutter framework.

The white blank screen is shown for a while before the Flutter widget (splash screen) appears.

The native Splash Screen

Yes, there is no other way to do from Flutter (as far as I know). Instead, Android and iOS have offered a way to handle this scenario. Let’s do it!

Android Splash Screen

In your Flutter project under android folder open launch_background.xml which located in android/app/src/main/res/drawable

<?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>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

2. Change splash background color with this line

<item android:drawable="@android:color/white" />

2.1 Or change the line to be this one if you want to use Hex color.

<item>
    <shape>
        <solid android:color="#221F20"/>
    </shape>
</item>

3. Show an app icon in the splash by uncommenting the following line

<item>
     <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

3.1 Add your image into the drawable folder; make sure you have icons for the different size of all Android screen (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).

3.2 change the icon by changing the src attribute to your image.
*The gravity is set to “center” so your logo will show at the center of the screen.*

<item>
    <bitmap
        android:gravity="center"
        android:src="@drawable/ic_flutter_logo" />
</item>

A complete version of launch_background.xml

<?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>
        <shape>
            <solid android:color="#221F20" />
        </shape>
    </item>    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_flutter_logo" />
    </item>
</layer-list>