CODEWITHSUNDEEP
fluttersplash-screen
gottaquestionalot
gottaquestionalot

Reputation: 31

Remove white screen before flutter splash screen

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?

Upvotes: 2

Views: 10902

Answers (5)

Jeevan Shrestha
Jeevan Shrestha

Reputation: 273

In android mainfest.xml add these line:

              <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/splash_screen"
              />

and in android/app/src/main/res/value/style.xml paste this line:

<item name="android:windowBackground">@drawable/splash_screen</item>

and in android/app/src/main/res/drawable folder place the image you want. and splash_screen is the name of your image

Upvotes: 2

Kamal Bunkar
Kamal Bunkar

Reputation: 1452

For Android App

There are two ways - first, add a new splash screen image in the drawable folder. See Example here

  1. edit launch_background.xml file by adding item
<!-- You can insert your own splash image assets here -->
<item>
    <bitmap
        android:gravity="center"
        android:src="@drawable/splash_screen" />
</item>

  1. 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.

enter image description here

Upvotes: 2

Ali Yar Khan
Ali Yar Khan

Reputation: 1344

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.

Upvotes: 1

Clinton
Clinton

Reputation: 483

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.

Upvotes: 0

Albert221
Albert221

Reputation: 7092

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.

Upvotes: 3

Related Questions