I'm using this splashscreen package to create a custom splash screen for my flutter app. By default it displays some blank/white page right before the splash screen is shown.
Is there a nice way to directly show the splash screen and skip this blank page?
This is because of the Android/iOS splash screen. Before Flutter draws the very first frame, a native splash screen is shown. You can tweak its color and contents as you like.
Please, refer to Adding a splash screen to your mobile app.
If you want to just change the color of the splash screen:
ic_launcher_background color in android/app/src/main/res/values/ic_launcher_background.xmlios/Runner/Base.lproj/LaunchScreen.storyboard with XCode and tweak the background here.paste an icon to android/src/drawable/launcher_bacground.png or any directory.
then paste code as below:
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/white" />
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/launcher_background" />
</item>
</layer-list>
you can customise color as you wish.
Add a colors.xml file in android/app/main/res/values/ as follows
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="YOUR_COLOR_NAME">COLOR_VALUE_HEX</color>
</resources>
After that change android/app/main/res/drawable/ and drawable-V21 value to this <item android:drawable="@color/YOUR_COLOR_NAME"/>
Thats it.
For Android App
There are two ways - first, add a new splash screen image in the drawable folder. See Example here
<!-- You can insert your own splash image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/splash_screen" />
</item>
Don't make change on launch_background.xml, Just replace the reference of the launch_background.xml file with the new splash screen file that you want to display on the app startup. I am assuming you already added a new splash screen image into the drawable folder. Now open the AndroidManifest.xml file & look for the meta tag android:name=”io.flutter.embedding.android.SplashScreenDrawable”. Just replace the launch_background name with your splash screen image name. ( change meta tag like below). Go inside res –> values folder and here also replace the launch_background name with your splash screen image name. Do this action on both folder values and values-night.
For iOS app
On Xcode window, Click on Runner-> Runner -> Assets.xcassets folder. Here you can see LaunchImage paste your splash screen image with all three different dimensions in this folder.
Open LaunchScreen.storyboard Again on the left side menu just below the Assets.xcassets folder, you will see LaunchScreen.Storyboard. Click on view controller scene -> view controller -> view. Note: – select (click on ) view only don’t click on LaunchImage. You already paste the new splash screen in the LaunchImage folder in the previous step. So you will see the same new image here in this window. When you select (click on ) view then on the right side window you can see options to change view settings like content mode, background, alpha etc. change the background colour as you want and set content mode to scale to fill.
Adjust Splash Screen You can adjust the splash screen position, size & background colour on the same window. Just click on launchImage OR select the image on the preview window. You can resize the image and can adjust the image postion. On the Right side window, you can make another setting as well.
iOS App Splash Screen is Ready.
