Flutter - Splash Screen for Android and iOS
What is Splash Screen?
A splash screen is a launch screen, start screen, or boot screen, which is a graphical
control element containing the image, logo, and current version of the software. It is the
first screen of the app that displays whenever the application is loading.
IOS-Launch Screen
- We need to open our project in Xcode. Being in the main directory of the project, we can
do that using open ios/Runner.xcworkspace command.
- We need to add AssetImage, which is going to be our icon on the splash screen
- we need to set a background color in LaunchScreen.storyboard as in the image below.
- For More info Click
Here.
Android Splash Screen
-
After generating all required images, place them in appropriate directories in
Android/app/src/main/res/drawable.
- we need to modify the Android/app/src/main/res/drawable/launch_background.xml file. This file will represent the look of our splash screen. If you also have a drawable-v21 directory present, which in my case, was generated together with the whole project, you can remove the mentioned directory or place there the same launch_background.xml file as in the drawable directory.
- if we need to modify the customize Color? then go to Android/app/src/main/res/values and create a new xml file like color.xml sample code in the image below.
- we need to modify the Android/app/src/main/res/drawable/launch_background.xml file. like belwo image.
- Our splash screen should appear after building the app.
Add Image Android Splash Screen
- After generating all required images, place them in appropriate directories in
Android/app/src/main/res/drawable.
- we need to modify the Android/app/src/main/res/drawable/launch_background.xml file. like belwo image.
- if having drawable-v21 folder? keep the same code in to the Android/app/src/main/res/drawable-v21/launch_background.xml
- Our splash screen should appear after building the app.