How to add a splash screen to a Flutter Android app

How to add a splash screen to a Flutter Android app

From this article, I’m going to describe the correct way of adding a splash screen for a Flutter android app. There are multiple ways to set up a splash screen in Flutter applications but the correct way to do this, set up a splash screen with native codes. The splash screens allow time for the app engine to load and initialize the app. This article contains a method to set up a splash screen on the Android side of a Flutter app.

Adding splash icon image to the project

1. First of all, we need to generate a splash icon image with different pixel densities(mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). To convert the splash icon images in different densities flow the online converter link;
   https://appicon.co/#image-sets
   you have to have a high-resolution image for this.
2. After converting the splash icon rename all the image files in the same name. (ex -: splash.png)
3. Then navigate to the following folder path inside the project
   android > app > src > main > res
4. Copy the converted splash icon images to the respective density mipmap folders
   ex :- mdpidensity image to mipmap-mdpi

Change the launch_backgeound.xml file

1. Change the launch_background.xml files inside drawable folders(my project consist of drawable and drawable-v21 folders).
2. Uncomment 7–11 lines and replace launch_image name with your splash icon name

original launch_background.xml file

after uncommenting, the code looks like following;

splash with white background

3. Run the application to see the newly added splash screen

Change the background colour of the splash screen

1. Create colors.xml file inside the values folder. (path: andoird > app > scr > main > res > values)
2. Edit the file adding the custom colour you want

colors.xml file inside values folder

3. Replace the 4th line of launch_background.xml file by importing the custom colour

ex:-<item android:drawable=”@color/splash_color”/>

after importing custom colour, the code looks like following;

splash screen with splash_color background

4. Rebuild the project to see the new splash screen with the custom background colour

These are the steps to add a splash to the Flutter android app. If you know XML well, you can edit the launch_background.xml files inside drawable folders to create amazing splash screens.

Access the full source code using the link below;

prahack/flutter_splash_example

Thanks for reading. 😊