Tutorials

Snippets

Search

Tags

Subscribe on Youtube

Setting up your SplashScreen in Flutter

Cover image

Today we'll cover how to setup your splash screen in Flutter. If you've done it for a native project then it's all the same so you can skip this tutorials :) We'll make the splash look like this.

Splash Screen Preview

Each platform has to be setup individually. If you don't have assets to test with you can download the ones I used here. Lets start with Android.

First we'll get the background color what we want it to be. Go to the values folder under android/app/src/main/res/ and create a new file called colors.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#181818</color>
</resources>

Then go to the launch_background.xml under android/app/src/main/res/drawable and change

<item android:drawable="@android:color/white" />

to

<item android:drawable="@color/background" />

Now copy your splash Icon into the mipmap folders with it's respective sizes. Mine is called filledstacks.png. Uncomment the lines where it says "You can insert your own image assets here" and set your android:src value to @mipmap/filledstacks. Your final xml should 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="@color/background" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap android:gravity="center" android:src="@mipmap/filledstacks" />
    </item>
</layer-list>

Open up the Runner workspace in xcode. Go to the Assets.xcassets folder in the left panel. Under AppIcon and LaunchImage right-click and select "New Image Set", name it SplashIcon and add your images in the respective sizes.

Splash Screen Preview

Open up LaunchScreen.storyboard and add a new Image. Set the image to the SplashIcon just created. Also make sure to remove the LaunchImage that's already added to the view.

Splash Screen Preview

Set your constraints to the sizes that you want and centre it horizontally and vertically.

Splash Screen Preview

Set your background of the View to custom color and set the hex value to 181818 and that's it.

Check out some of the other Snippets

Also check out

Cover image

Easy toasts with OkToast

This tutorial covers an easy way to show and style toast messages.

Link
Cover image

Pull to refresh in Flutter with Background Image

In this tutorial we implement the pull to refresh header with a image background.

Link
Cover image

Build a Theme Manager in Flutter

This tutorial shows you how to Build a Theme manager that changes the status bar color in Flutter and more

Link