Remove white screen before flutter splash screen

2
votes

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?

3
fluttersplash-screen

3 Answers

3
votes

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:

  • Android: edit the ic_launcher_background color in android/app/src/main/res/values/ic_launcher_background.xml
  • iOS: Open the ios/Runner/Base.lproj/LaunchScreen.storyboard with XCode and tweak the background here.
1
votes

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.

0
votes

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.