A splash screen is a screen that shows up when an application is just booting, it usually shows a white screen with an image in the center of the screen, usually the application icon. Applications use splash screens to let the user know that the program is starting or loading in the background.
According to the flutter documentation
Splash screens (also known as launch screens) provide a simple initial experience while your mobile app loads. They set the stage for your application while allowing time for the app engine to load and your app to initialize
Now that we know what a splash screen is, let's get down to how to create it using flutter. In this section, I will be explaining how to do this for android applications.
Open your IDE(Android studio, vscode)
On your project directory, navigate to this folder android>app>src>main>res>drawable
copy the image you want to use as the splash screen image in the drawable folder
navigate to the values folder which is located in the res folder android>app>src>main>res>
- you should find a style.xml file inside this folder, now create a color.xml file inside the res folder(that makes it two files)
- now add this code inside the color.xml file
<?xml version="1.0" encoding="utf-8" ?>
<resource>
<color name="white">#FFFFFF</color>
</resource>
The color is the name of the color you want the splash to have, the value #FFFFFF is the hex code for the color white, you should change that to the color you wish, check up on hex code for color
- navigate to the drawable folder android>app>src>main>res>drawable, open the file launch_background.xml you should see something similar to 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/white" />
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/splash" />
</item>
</layer-list>
now edit the line below by changing the white to the name of the color you specified earlier in color.xml file
<item android:drawable="@color/white" />
next thing is to get the image, you need to uncomment the item tag if it is commented, edit the line below by changing the path to the path where the image is located, in this case, the image is located at drawable/splash.png but the file extension can be ignored(in this case .png)
android:src="@drawable/splash" />
save all your files, run your flutter app again, and watch your splash screen come up.
I have not tried this for the ios version, I am currently using a dell pc with Zorin OS installed on it, but I got you covered, so to do this for the ios version, kindly click the link below to visit the flutter documentation on how to do it on ios.
In case of any difficulties while trying to this, I am more than happy to assist. Reach to me on twitter @fawas_ola
I wrote about generating app icon for your android and ios in the link below