Why is there a white screen before the splash?
By default, iOS and Android show a native loading screen before the splash screen of a Flutter app is displayed. This default screen is completely white which means your app will have a white "flash" before showing your custom splash screen in your app's colours and with your logo. This is not a good user experience. We are unable to remove this native screen, but we can customise it a little bit to make it less intrusive.
Customising the white screen
The white screen is native to the platform (Android and iOS) so it can't be removed. Fortunately, both platforms provide the ability to set the background colour of this screen. This means that at a minimum, the white screen can be incorporated into the loading process of your app without sticking out like the plain white can.
For Android, we need to modify the styles.xml file found in android/app/src/res/values/styles.xml
There are two values here to be set - one for the white screen and the other for the time between hiding your custom splash screen and showing the first screen of your app. These settings allow values from the Drawable options as well as project variable values.
The styles.xml will end up looking something like:
Finally, to finish the setup, in the AndroidManifest.xml file we need to add references in:
This will cover off all of the Android initialisation timings.
The iOS solution is simpler and can be done in two places.
The first is directly in the storyboard file if you can't/don't work directly in XCode very often.
Open up LaunchScreen.storyboard found in ios/Runner/Base.Iproj. In this file, you will find one tag called "color" with a key of "backgroundColor" and attributes red, green, blue and alpha numbers. By default, they will all be set to 1. The other attributes are to be left as-is.
The trick with editing this file directly is that the values need to be decimals and so if you are working in standard RGB colour numbers, you need to divide them by 255 to get the equivalent decimal value.
For the last app I did this on, the color tag ended up being:
The second method is via XCode.
Open up your Flutter app in XCode and navigate to the LaunchScreen ViewController View node:
On the right in the properties, there is the background attribute. Clicking on this and choosing custom will allow you to define the RGB value you'd like the colour of the white screen to now appear as.
Running your app on Android and iOS will now no longer show the annoying white screen.
If you liked this post, please share it!