Flutter splash screen for Android and IOS

By default, when a Flutter project is created, it comes with a splash screen for both Android and IOS already. However, the default splash screen is just a full white screen. To update the default splash screen with your own background color and logo, you just have to make some updates to the existing splash screen configurations and image assets.

For Android, the default flutter app has a LaunchTheme defined in android/app/src/main/res/values/styles.xml and it is applied in the AndroidManifest.xml. To make updates to the splash screen, go to the folder android -> app -> src -> main -> res -> drawable, open the launch_background.xml file. If you want to update the background color and add a logo image in the center of the splash screen. Update launch_background.xml to look like the following. In this case, it uses a holo_blue_bright for the background and displays the app icon ic_launcher in the center of the splash screen.

For IOS, the default Flutter template includes an Xcode storyboard named LaunchScreen.storyboard that can be customized as you see fit with your own assets. By default, the storyboard displays a blank image, but you can change this. To do so, 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.

References:

– https://docs.flutter.dev/development/ui/advanced/splash-screen

– https://stackoverflow.com/a/48101776/2069407