CODEWITHSUNDEEP
androidiosflutter
oopsrush
oopsrush

Reputation: 19

How to make the splash screen background transparent in flutter (for both Android and IOS)?

I want to make the splash screen background transparent so that it shows only an icon on the screen when the app starts.

What I have done so far in launch_background.xml for Android:

<?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/transparent" />
     <item>
        <bitmap
            android:src="@drawable/index"
            android:gravity="center"
            />
    </item>
</layer-list>

But what I got was a black background like:

The Image

enter image description here

What I want, something like this:

The image

How to approach this problem properly? Thank you!

BTW: What about IOS?

Upvotes: 0

Views: 2488

Answers (1)

Justus Lolwerikoi
Justus Lolwerikoi

Reputation: 873

You cannot make a splash screen transparent. You need to have a color property for the splash screen background, the best way is to define background colors for both the dark and light them

//pubspec.yaml

dependencies:
  //Others
  flutter_native_splash: ^2.4.0

flutter_native_splash:
  color: "#f5f5f5"
  image: "lib/assets/image_assets/splash_image_light.png"
  color_dark: "#0F141A"
  image_dark: "lib/assets/image_assets/splash_image_dark.png"
  android_12:
    color: "#f5f5f5"
    image: "lib/assets/image_assets/splash_image_light.png"
    color_dark: "#0F141A"
    image_dark: "lib/assets/image_assets/splash_image_dark.png"

Upvotes: 0

Related Questions