Flutter for Line of Business apps – Splash screens and launch icons

Adding splash screens and launch icons is always a pain. It must be done, and, it must be done right. You only get one chance to make a first impression.

Luckily I had a UX designer that provided all the assets in the right sizes.

Because I had all assets in the right sizes, I decided to do it manually for Android and iOS and not to use a package like https://pub.dev/packages/flutter_launcher_icons.

Splash screens and launch icons are platform-specific. Therefore I had to do the changes in the native solutions in Android Studio and Xcode.

Splash screen on iOS

For iOS, I choose to just adjust what the default iOS project already provided. In Assets.xcassets, there is a section LaunchImage with three empty spots with the names “1x”, “2x” and “3x”.

To add an image to the existing splash screen you have to add these three images, in my case these were:

ic_launcher.png   (393x137)
ic_launcher-1.png (524x182)
ic_launcher-2.png (786x273)
Before adding the files
After adding the files

The splash screen now looks like this:

Before changing the background color

After changing the background color, the splash screen looks fine.

After changing the background color

Launch icons on iOS

To add the launch icons in iOS, you have to open the section AppIcon in Assets.xcassets. With a default Flutter project, it will look like this in Xcode:

Before changing the launch icons

After carefully dragging and dropping all icons to the right places, it will look like this:

After changing the launch icons

At last, you would like to change the CFBundleName in the info.plist to something that you want to have as text below the launch icon.

Splash screen on Android

The process of adding a splash screen felt a bit easier on the Android side.

First I replaced all existing ic_launcher.png files with the ones that I received from my UX designer:

<flutter_project>/android/app/src/main/res/mipmap-mdpi/ic_splash.png
<flutter_project>/android/app/src/main/res/mipmap-hdpi/ic_splash.png
<flutter_project>/android/app/src/main/res/mipmap-xhdpi/ic_splash.png
<flutter_project>/android/app/src/main/res/mipmap-xxhdpi/ic_splash.png
<flutter_project>/android/app/src/main/res/mipmap-xxxhdpi/ic_splash.png

Add the file that specifies the background color of the splash screen:

<flutter_project>/android/app/src/main/res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splash_background">#012141</color>
</resources>

Edit the file that defines the splash screen to include the background color and the ic_launcher image:

<flutter_project>/android/app/src/main/res/drawable/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 android:drawable="@color/splash_background" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_splash" />
    </item>
</layer-list>

That’s it. The splash screen on Android is ready.

Launch icons on Android

I placed all the received assets in the following folder:

<flutter_project>/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
<flutter_project>/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
<flutter_project>/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
<flutter_project>/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
<flutter_project>/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
<flutter_project>/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
<flutter_project>/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
<flutter_project>/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
<flutter_project>/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
<flutter_project>/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
<flutter_project>/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
<flutter_project>/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
<flutter_project>/android/app/src/main/res/drawable/ic_launcher_foreground.xml
<flutter_project>/android/app/src/main/ic_launcher-web.png

At last, you would like to change the android:label in the AndroidManifest.xml to something that you want to have as text below the launch icon.

Published by Sander Roest

Professional app developer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: