Flutter splash_screen android 12

Question

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.

Answer 1

You guys can simply avoid the Android 12 default splash screen with Applogo using the below steps:

Goto Android folder -> inside app -> src-> main -> res: Inside all values directory we have styles.xml file: Add this item in both of the style attributes:

<item name="android:windowIsTranslucent">true</item>

Add this in all styles.xml files inside the style attribute and see the magic of how it works.

Answer 2

After a few hours of trying to fix this, I found something that solved my issue. I hope it can help someone.

On your AndroidManifest.xml file, delete this meta-data line.

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

Head over to your pubspec.yaml, and do something like this:

flutter_native_splash:
  color: "#101636"
  image: assets/splash_n.png
  android: true
  ios: true
  fullscreen: true
  android_12:
    image: assets/splash_n.png
    icon_background_color: "#101636"

Make sure you strictly follow these guidelines from this flutter_native_splash: android 12

Be aware of the following considerations regarding these elements:

image parameter. By default, the launcher icon is used:

1. App icon without an icon background, as shown on the left: This should be 1152×1152 pixels, and fit within a circle 768 pixels in diameter.

2. App icon with an icon background, as shown on the right: This should be 960×960 pixels, and fit within a circle 640 pixels in diameter.

3. icon_background_color is optional, and is useful if you need more contrast between the icon and the window background.

4. One-third of the foreground is masked.

5. color the window background consists of a single opaque color

On your terminal:

dart run flutter_native_splash:create

Run your code again.

Answer 3

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.

Answer 4

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

Answer 5

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"