Flutter. Launch/Splash screens.
How to add static start/launch/splash screen to Android and iOS mobile devices
1. Android
Step 1
You will need to make few changes in android/app/src/main/res/drawable/launch_background.xml file.
If you are seeing `Loading` screen all the time instead of code -> you need to change view from “Design” to “Code” in the top-right corner of the Android Studio IDE.
You can set any name you prefer, but for this case we will leave it as it is.
If you will save your changes and restart your app you will get an “File not found” error.
Step 2
To fix this, we will add new png icon with launch_image name.
Lets see the result:
You can add an jpg image as well:
Let’s see the result:
! Don’t forget to copy-paste your start image to other folders for different screen sizes as well (-mdpi, -xhdpi, -xxhdpi, etc.)
2. iOS
From official iOS documentation : Don’t use a static image for your launch screen. If you need to know the dimensions of various screen sizes to help you lay out your designs, see Device Screen Sizes and Orientations.
Step 1
For changing iOS splash screen we will need to open Flutter ios folder using Xcode:
Step 2
After that, open Assets.xcassets -> LaunchImage and just drag n’ drop our image to the LaunchImage.
For this case I’ll use one image size.
Don’t forget to check your splash screen on different iOS devices to check the result, to avoid such scenarios:
Great job!
