How to add splash screen in Flutter for iOS and Android.

In this tutorial I will show you how to add a splash screen to a flutter app for iOS and Android. — Step by Step guide.

Flutter Animated Splash Screen

Splash Screen is most commonly the first startup screen which appears when App is opened. Most of the phones today have become so fast that there is almost no use for a splash screen. However it is still recommended to enrich you app with one, for the purpose of aesthetics mostly. Giving your users a visually beautiful welcome proves to increase the usage of you app.

In this step by step guide, I will show you how to add a splash screen in flutter for iOS and Android.

How to add Android Splash Screen

1. Find the “android” folder in your Flutter project.
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).

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:

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

 <item>

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

 </item>

Please pay attention that we comment the XML code for the white background and uncomment the code about the mipmap image. If somebody is interested the file launch_background.xml is used in styles.xml file.

How to add iOS Splash Screen

1. Find the “ios” folder in your Flutter project.
2. Browse to Runner -> Assets.xcassets -> LaunchImage.imageset. There should be LaunchImage.png, LaunchImage@2x.png, etc. Now you have to replace these images with your branding image variants. For example:

• the image with density 1 needs to override LaunchImage.png,
• the image with density 2 needs to override LaunchImage@2x.png,
• the image with density 3 needs to override LaunchImage@3x.png,
• the image with density 4 needs to override LaunchImage@4x.png,

If I am not wrong LaunchImage@4x.png doesn’t exist by default, but you can easily create one. If LaunchImage@4x.png doesn’t exist, you have to declare it in the Contents.json file as well, which is in the same directory as the images. After the change my Contents.json file looks like this :

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

That should be all you need, next time when you run your app, on Android or iOS you should have the right Splash Screen with the branding image which you added.