Flutter: Create a simple splash screen for Android

The Android system takes some decent amount of time to initialize the app’s processes. In case of an app created with Flutter there is additional initialization work involved for the Flutter engine to start. So the following two events occur before the user can the first screen of the app:

1. The Android app related processes are initialized.
2. Flutter specific initialization takes place

The problem: Now if we don’t display anything during this initialization time a blank screen will be displayed to the user which is not at all a good experience for the user. We must try to keep the user engaged.

The opportunity: We can display a SplashScreen with the logo or other content to promote our brand.

The wrong way:  Creating a stateful or stateless widget and displaying it for a few seconds before loading the main widget of the app is a bad idea. The main purpose of a SplashScreen is to keep the user engaged while the system is preparing the app for the user.

The right way:Navigate to the style.xml file inside the android folder of your Flutter project. Create the following two styles if they don’t exists.

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <!-- Show a splash screen on the activity. Automatically removed when
         Flutter draws its first frame -->
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/normal_background</item>
</style>

Create the two drawables mentioned in the code above @drawable/launch_background ,

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/holo_red_dark" />
     <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

and @drawable/normal_background.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
</layer-list>

Update the AndroidManifest.xml: Set the theme of the main activity to LaunchTheme and add the metadata as shown below.

<application
        ....
        >
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            ....
            ....
            >
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme"
                />
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/launch_background"
                />
            ....
            .... 
        </activity>
        ....
        .... 
    </application>

Now if we run the app we can see a red-colored SplashScreen with the Flutter icon while the app loads.

You can get the companion source code for this tutorial from GitHub
https://github.com/gitanjal/flutter_examples/tree/master/flutter_splash_screen