How to use a custom splash screen in flutter

You might be wondering how to add a splash screen to your Flutter app. In case you don’t understand, a splash screen, is the first screen that displays when you open a Flutter app.

When you start a new Flutter app, there’s a white background screen that stays for some seconds, that’s the Splash screen that comes with flutter.

Today, we’ll learn to change that to something custom. Lets get started.

For iOS

There are different set ups for Android and iOS. lets start with iOS.

First, Open the project in Xcode, Goto ios/Runner folder

in here we need the Assets.xcassets and LaunchScreen.storyboard.

Open Assets.xcassets and click LaunchImage. Paste your images and icons according to their sizes (1x, 2x etc).

Open LaunchScreen.storyboard, click on View, and locate a downward arrow icon on the right panel and change the properties to what you want.

Now click Image, and click the same arrow icon as before and change the propeties as you need.

DONE!!!

For Android

Navigate to the drawable (android/app/src/main/res/drawable) folder, you’ll see a launcher_background.xml file.

Chnage the contents from:

<?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>

To:

<?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" />

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

Navigate to mipmap folders and add a new launch_image.png

That’s your splash screen!!

if you have any questions or issues, pls comment below. Thanks

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.