We noticed you're using an ad blocker

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Flutter native splash screen without plugin!

club-football-league

FootballDesk

Get update standing EPL, UEFA, LaLiga and more

Get Now

Often every app has a splash screen. Some of the developers use third-party plugins for adding a native splash screen to their android application. You can add an android native splash screen to your flutter app without any third-party plugins. Here I'll show you the step by step tutorial for adding an android native splash screen for your flutter application without any plugin.

 

Flutter native splash screen

  1. Add an image for the splash screen
  2. Change the configuration
  3. Background change  [optional]

 

Step 1: Add an image for the splash screen

Open your flutter project and go to android\app\src\main\res\mipmap-hdpi directory and add an image (logo of your app or any image) with the name launch_image.png

 

Step 2: Change the configuration

Now open the launch_background.xml file from android\app\src\main\res\drawable and uncomment the item bitmap section like below.

<?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="@android:color/white" />

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

for android API 21, flutter uses the android\app\src\main\res\drawable-v21\launch_background.xml file. Now do the same things for the drawable-v21\launch_background.xmlfile.

Note: For API 21 configuration, if you face any build error please change the value like below.

Change the line

<item android:drawable="?android:colorBackground" />

to

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

 

Done! we will see the native android splash screen with our added image and white background during app opening time.

 

3. Background change  [optional]

By default splash screen will show with white background during app opening. If you want to change the background colour of the native android splash screen then follow the instructions given below.

Create a colors.xml file into the android\app\src\main\res\values directory and add the colour hex value according to your choice.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splash_bg">#34495e</color>
</resources>

Now update the background-colour value to the launch_background.xml file [shown in step 2]

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

 

Hope this step by step tutorial for the android native splash screen for the flutter app will help you to add your own app splash screen. If you find this helpful then please share it with others.


Share on


Related Post


Flutter method channel tutorial

Flutter plugin development - Step by step

Duplicate GlobalKey detected - [Solved]

Flutter async validation tutorial

Flutter JSON to model converter online

Flutter ListView search tutorial