logo-img

Shopping cart

Subtotal:

$78.00

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
  • Spire View Tech
  • we need to set a background color in LaunchScreen.storyboard as in the image below.
  • Spire View Tech
  • 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.
  • Spire View Tech
  • 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.
  • Spire View Tech
  • we need to modify the Android/app/src/main/res/drawable/launch_background.xml file. like belwo image.
  • Spire View Tech
  • 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.
  • Spire View Tech
  • 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.