How to create Launch/Splash screens in Flutter

Artem Diashkin
Apr 19, 2020 · 3 min read

How to add static start/launch/splash screen to Android and iOS mobile devices

1. Android

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.

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.

For changing iOS splash screen we will need to open Flutter ios folder using Xcode:

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!

LITSLINK

LITSLINK’s team is sharing their experience

By LITSLINK

It's a test newsletter! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK

LITSLINK

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK

LITSLINK

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.