Splash Screen in Flutter for Android, iOS

If you have ever run the flutter app before, you have seen that the white screen is visible at launch and then the app is navigating to another screen.

Maybe most of the developers (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.

Only thing you have to do is put branding image on the right place and the splash screen starts working.

Let’s start with Android app (As I’m native android developer)

Find the ‘android’ folder from your flutter project.
Browse to app -> res -> main -> src folder.
Place all your splash screen images or icons to the corresponding folder of mipmap.
For example :

Image with density 1 will be in mipmap-mdpi
Image with density 1.5 will be in mipmap-hdpi
Image with density 2 will be in mipmap-xhdpi
Image with density 3 will be in mipmap-xxhdpi
Image with density 4 will be in mipmap-xxxhdpi

Now, you will find the launch_background.xml file under res -> drawable folder, open it and uncomment commented code or simply replace it with following code.

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

I will use the default icon available in all mipmap folders and will check how it will look.

Update your image name in android:src=”@mipmap/your_image_name”. Here I’m using ic_launcher.png from mipmap folder so our new code will look like this:

<?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/ic_launcher" />
   </item>
</layer-list>

Simply run the app and you will get your image as a splash screen.

Now, set up iOS splash screen.

Find the iOS folder in your flutter project.
Browse to Runner -> Assets.xcassets -> LaunchImage.imageset, There should be LaunchImage.png, LaunchImage@2x.png, LaunchImage@3x.png etc. Now you have to replace these images with your preferred image variants.

For example :

Image with density 1 needs to override LaunchImage.png
Image with density 2 needs to override LaunchImage@2x.png
Image with density 3 needs to override LaunchImage@3x.png

If you need any further image dimension then you can add it and you must add it to Contents.json file too. After this your Contents.json file will look 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"
   }
 ],
 "info" : {
   "version" : 1,
   "author" : "xcode"
 }
}

Now, run the app on ios device or simulator and you will find a splash screen with your image.

Conclusion:

This article is published to help with setting up splash screen in flutter app.

Thank you for reading this article. if you still need any help then you can contact us on info@tagnism.com

Conclusion:

Leave a Reply Cancel reply