Splash Screen in Flutter
Why do we use a Splash Screen?
Every Flutter app requires time for the app engine to load and to initialize. In the meantime, Splash Screen (also known as launch screen) sets the visual display for the application. It may also be used to get information from the internet that the app needs to use when it has loaded. Another use of splash screen is for branding purposes. The white screen which you see when you run the app is the default splash screen provided by the Flutter. You cannot call the first screen of the app (Page run through the main function) a splash screen as it does not render during buffer time before the app loads. Hence, not solving the purpose of a splash screen.
Splash Screen in iOS
Apps in AppStore have to use storyboard in Xcode to provide the app’s launch screen. The default Flutter template includes an Xcode storyboard named LaunchScreen.storyboard that can be customized as per your assets. By default, the storyboard displays a blank image. To customize it, open the Flutter app’s Xcode project by typing open ios/Runner.xcworkspace from the root of your app directory. Then select Runner/Assets.xcassets from the Project navigator and drop in the desired images to the LaunchImage image set.
To check out the detailed guide for launch screens by Apple, click here.
Splash Screen in Android
The default Flutter project includes a launch theme and a launch background. You can customize this by editing styles.xml (android/app/src/main/res/values). To change the background color, create a new file, and name it as colors.xml in android/app/src/main/res/values.
Now go to launch_background.xml (android/app/src/main/res/drawable) and change
to
Place the variants of your branding image/icon in the mipmap folders according to their respective sizes. Now, you need to uncomment some of the XML code in your launch_background.xml file to insert your own image assets. Your final xml file should look like this.
