Flutter. Launch/Splash screens.

Image for post
Image for post

1. Android

Step 1

You will need to make few changes in android/app/src/main/res/drawable/launch_background.xml file.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Step 2

To fix this, we will add new png icon with launch_image name.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

! 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:

Image for post
Image for post

Step 2

After that, open Assets.xcassets -> LaunchImage and just drag n’ drop our image to the LaunchImage.

Image for post
Image for post
Image for post
Image for post

Don’t forget to check your splash screen on different iOS devices to check the result, to avoid such scenarios:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store