Splash Screen in Flutter Right Way and Full Screen

INTRODUCTION

Hello developers, hope you're doing well. What is splash screen ? splash screen is the screen which show up when icon of an app is clicked and main page isn't yet loaded. In this post, we will see how to implement splash screen in flutter. There are 2 ways to do it but we will cover the right and standard way. Al tough I will tell you what's the other way in the end of the post. So, keep reading...

 We can divide this process into just 3 easy steps :

1. Add image in the 'drawable' folder
2. Add meta tag in the AndroidManifest.xml
3. Add your image in the launch_background.xml

So, let's start with the first step :

1.  Add image in the 'drawable' folder

In your project explorer, go to 'android-->src-->main-->res-->drawable'. In this folder, add the image you wish to show in your app.

2. Add meta tag in the AndroidManifest.xml

 In your project explorer, go to 'android-->src-->main-->AndroidManifest.xml'. In this file,

<meta-data

                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"

                android:value="true" />
check if this meta-data tag is added in the activity tag.
This keeps the window background of the activity showing until Flutter renders its first frame. It can be removed if there is no splash screen

3. Add your image in the launch_background.xml 

In your project explorer, go to 'android-->src-->main-->res-->drawable-->launch_background.xml'.

Replace the code inside this file with this code,

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

   

 <item>

        <color android:color="#FFF"></color>

    </item>

    <item >

        <bitmap

            android:gravity="center|fill_vertical"

            android:src="@drawable/your_image_name" />

    </item>

   

</layer-list>

Replace 'your_image_name' with your splash screen image name without the extension (.jpg or .png etc). Also, this android:gravity is the attribute for changing the aspect ratio and fit of your splash screen. The above code will fix most of the use cases but if you need a different aspect ratio then visit : https://developer.android.com/reference/android/graphics/drawable/BitmapDrawable.html#attr_android:gravity and experiment with different gravity types.

That's it. You're done ! Run your app now and you'll have your splash screen.

The other way to implement a splash screen is to create a widget with the image and set that widget as the root widget of the app and after few seconds navigate to the main widget. But that is a workaround and not the standard way.

Try this and comment if this worked or didn't worked for you,