Flutter splash_screen android 12

Viewed 2046

I need show Splash Screen(image: background_light_SC.png) when user open my application and flutter load my application. I use this package, and all work good. But if I start my application in android 12, I see white background with my icon app in Splash Screen.

pubspec.yaml

flutter_native_splash:
 background_image: "assets/images/background_light_SC.png"
 android: true
 android12: true
 ios:  true

Whats wrong? In all android up to Android 12, everything works well.

3 Answers

Follow the steps outlined here to set up the flutter_native_splash package. https://pub.dev/packages/flutter_native_splash

For Android 12, you will need to specify the following in the flutter_native_splash.yaml file, just like the above user specified:

android_12:
# The image parameter sets the splash screen icon image.  If this parameter is not specified,
# the app's launcher icon will be used instead.
# Please note that the splash screen will be clipped to a circle on the center of the screen.
# App icon with an icon background: This should be 960×960 pixels, and fit within a circle
# 640 pixels in diameter.
# App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
# 768 pixels in diameter.
#image: assets/android12splash.png

# Splash screen background color.
#color: "#42a5f5"

# App icon background color.
#icon_background_color: "#111111"

# The image_dark parameter and icon_background_color_dark set the image and icon background
# color when the device is in dark mode. If they are not specified, the app will use the
# parameters from above.
#image_dark: assets/android12splash-invert.png
#color_dark: "#042a49"
#icon_background_color_dark: "#eeeeee"

All you need to do is uncomment the fields that pertain to your application. For example, you may only need to set

image: assets/android12splash.png

After you finish making your changes, make sure to run the following commands in the root directory of your project in order to build the splash screen:

flutter clean
flutter pub get
flutter pub run flutter_native_splash:create --path=path/to/your/flutter_native_splash.yaml

As specified into the package:

Android 12 Support

Android 12 has a new method of adding splash screens, which consists of a window background, icon, and the icon background. Note that a background image is not supported.

The package provides Android 12 support while maintaining the legacy splash screen for previous versions of Android.

PLEASE NOTE: The splash screen may not appear when you launch the app from Android Studio. However, it should appear when you launch by clicking on the launch icon in Android.

You also need to edit your pubspec.yaml following example. I don't think it's sufficent to add android12:true

android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # App icon background color.
    #icon_background_color: "#111111"

    # The image_dark parameter and icon_background_color_dark set the image and icon background
    # color when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #icon_background_color_dark: "#eeeeee"

As mentioned in @Dani3le_ answer "Note that a background image is not supported". its means you can only play with the launch screen icon and background color, not with the background image...

another hack is used in old school way to show the splash screen after the launch screen for 3 sec ... but you gonna end up with 2 splash screens for android 12.

Related