Flutter — How to add splash screen

The actual way of doing a Splash screen in Flutter for Android and iOS.

I want to shed some more light on the actual way of doing a Splash screen in Flutter.

Maybe most of the devs (like me) are thinking that there isn’t a Splash screen by default in Flutter and they need to do something about that. There is a Splash screen, but it’s with white background and nobody can understand that there is already a splash screen for iOS and Android by default.

The only thing that the developer needs to do is to put the Branding image in the right place and the splash screen will start working just like that.

Here is how you can do it step by step:

Android Splash screen — Step by Step

Step 1: Find the “android” folder in your Flutter project.

Step 2: Browse to the app -> src -> main -> res folder and place all of the variants of your branding image in the corresponding folders. For example:

• the image with density 1 needs to be placed in mipmap-mdpi,
• the image with density 1.5 needs to be placed in mipmap-hdpi,
• the image with density 2 needs to be placed in mipmap-xhdpi,
• the image with density 3 needs to be placed in mipmap-xxhdpi,
• the image with density 4 needs to be placed in mipmap-xxxhdpi,

By default in the android folder there isn’t a drawable-mdpi, drawable-hdpi, etc., but we can create them if we want. Because of that fact the images need to be placed in the mipmap folders. Also the default XML code about the Splash screen (in Android) is going to use @mipmap, instead of @drawable resource (you can change it if you want).

Step 3: The last step on Android is to uncomment some of the XML code in drawable/launch_background.xml file. Browse to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you shall see why the Slash screen background is white. To apply the branding image which we placed in step 2, we have to uncomment some of the XML code in your launch_background.xml file. After the change, the code should look like: