Splash Screen in flutter

Mahi!
feedflood
Published in
1 min readMar 17, 2020

Here is a quick way to create a splash screen for android apps in flutter.

You can use two kinds of graphics

  • A JPG image which you want to display as it is.
  • A PNG image (a logo) which you want to display on some background

Have your image ready. (Vector image preferred for better quality)

Go to project\android\app\src\main\res\drawable folder.

Their paste your image and then open the launch_background.xml file, It 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="@android:color/white" />
<!-- You can insert your own image assets here -->
<!--<item>
<bitmap
android:gravity="center"
android:src="
@mipmap/your_image_name" />
</item>-->

</layer-list>

Now, for JPG image

Comment the line no. 4 which sets the background color to white.

this

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

to this

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

Then uncomment lines from 7–11 and on line 10 enter the src to your image’s location.

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

Since we’ve our image inside the drawable folder itself, therefor

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

don’t add the extensions such as .jpg or anything

Run your app now and you should see the image at the startup

Now, for PNG image

Instead of commenting line no.4 change the color to your desired color.

Then add the image on line 10 as shown above after un-commenting lines from 7–11.

Since the background of your PNG file will be transparent then it will show up with the background color on the start screen

--

--