While implementing my current Flutter project splash screen, I came across some tutorials showing how to do that using a Flutter widget, which was kind of weird, being that official Flutter documentation says the default Flutter project, already includes a native View as splash screen that can be customized. From official docs:
Each Flutter experience in an app requires a few moments to initialize the Dart isolate that runs the code. This means a user momentarily sees a blank screen until Flutter renders its first frame. Flutter supports an improved user experience by displaying an Android View as a splash screen while Flutter initializes."
So if the home screen of your Flutter project is a fake splash screen with a timer(ugh), you end up with 2 splash screens, and one of them is just and empty view, which is a bad user expetience to say the least.
So here is how you setup a very basic splash for Android on your Flutter project, the right way!
- Splash screen background value file
Create a new file called color.xml at android/app/src/main/res/values
- Define the color value in the xml file you just created
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="red">#FF0000</color> <!-- The color you want -->
</resources>
- Tell builder to use the color value we just created
Open the launch_background.xml file located at android/app/src/main/res/drawable and update first item under the layer-list to use our new color
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/red" /> <!-- here you to set your new color name as background -->
...
</layer-list>
- Insert app logo
Save the logo image in the same folder as you launch_background.xml file and replace the uncommented section at the bottom of the launch_background.xml file and update as follows:
<!-- You can insert your own image assets here -->
<item android:width="200dp" android:height="85dp" android:gravity="center"> <!-- desired width/height and positioning -->
<bitmap
android:gravity="fill"
android:src="@drawable/my-logo-image-name-with-no-extension" /> <!-- image name -->
</item>