6

I am using flutter_native_splash in my Flutter project. The splash screen works perfectly on Android 11 and below, but on Real Android 12 devices and above, the logo does not appear on the first app launch — only the background color is displayed.

However, from the second launch onwards, the splash screen shows the logo and background color correctly.

Has anyone faced this issue? How can I make the logo appear even on the very first launch on Android 12+?

My yaml code : -

flutter_native_splash:
  image: assets/loginPage/splashScreenELogo.png
  color: "#5C7CFF"
  color_dark: "#5C7CFF"
  fullscreen: true
  android_12:
    image: assets/loginPage/splashScreenELogo.png
    color: "#5C7CFF"
    color_dark: "#5C7CFF"
    fullscreen: true

My manifest code : -

 <application
        android:label="CGPEY"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:taskAffinity=""
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
            android:name="io.flutter.embedding.android.NormalTheme"
            android:resource="@style/NormalTheme"/>
      
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

My png properties : -

Dimensions : 512 x 511
bit depth : 32
size : 8.8 kb

I have implement what @iamgoddey told me to

my v-31 xml code : -

   <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowSplashScreenBackground">#5C7CFF</item>
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash</item>
    </style>
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

I have also downloaded the source code from this tutorial : - https://www.youtube.com/watch?v=lLFaZfI-NwI&ab_channel=ManojKulkarni , this too does not work for android 12 and plus.

Improve this question
1
  • 1
    Starting with Android 12 (API 31), splash screens are handled by the SplashScreen API. Flutter Native Splash generates the correct drawable for android:windowSplashScreenAnimatedIcon, but Android caches the splash drawable only after the first run. So, if the generated resource is too large, not in the right format, or not properly referenced in your theme, Android falls back to background color on first launch. Commented Aug 22 at 12:06

3 Answers 3

Reset to default
1

Starting with Android 12 (API 31), splash screens are handled by the SplashScreen API. Flutter Native Splash generates the correct drawable for android:windowSplashScreenAnimatedIcon, but Android caches the splash drawable only after the first run. So, if the generated resource is too large, not in the right format, or not properly referenced in your theme, Android falls back to background color on first launch.

dev_dependencies:
  flutter_native_splash: ^2.x.x

The Regenerate

flutter clean
flutter pub get
flutter pub run flutter_native_splash:create

In android/app/src/main/res/values-v31/styles.xml make sure you have the code below.
The android:windowSplashScreenAnimatedIcon must point to a drawable generated by flutter_native_splash, not directly to your PNG. It usually generates splash.xml.

<style name="LaunchTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
    <item name="android:windowSplashScreenBackground">@color/splash_color</item>
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash</item>
    <item name="android:windowSplashScreenIconBackground">@color/splash_color</item>

</style>

Remove the legacy SplashScreenDrawable meta-data you already have. On Android 12+, this is not used. Sometimes it conflicts. You can safely remove this line if you rely on flutter_native_splash.

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

what can I do , so the app show logo on 1st launch ?
I have updated with a code snippet
I have updated my question with the changes in my xml file but I am getting error , no splash found because there is no splash created by android.
did yo add to the dev dependencies the flutter_native_splash: ^2.x.x
Problem in your file <item name="android:windowSplashScreenBackground">@color/splash_color</item> <item name="android:windowSplashScreenIconBackground">@color/splash_color</item> But the error says: resource color/splash_color not found. That means you don’t have a splash_color defined in res/values/colors.xml.
error: style attribute 'android:attr/windowSplashScreenIconBackground' not found This happens if you’re compiling with SDK < 31. The windowSplashScreen attributes only exist in Android 12 (API 31). If your compileSdkVersion in android/app/build.gradle is less than 31, you’ll get this error.
okay , let me fix it
Fix by doing this. Add splash color to colors.xml In android/app/src/main/res/values/colors.xml, add: <resources> <color name="splash_color">#5C7CFF</color> </resources> (Use the same hex you set in flutter_native_splash.yaml.) Update compileSdkVersion In android/app/build.gradle, make sure you have android { compileSdkVersion 33 // or at least 31 targetSdkVersion 33 // or at least 31 } Clean & rebuild and The splash logo should appear even on first launch (assuming your PNG is reduced to ~512×512).
yes , I made all the changes , now i am only getting this one error : - com.cgpey.services.app-mergeDebugResources-61:/values-v31/values-v31.xml:217: error: style attribute 'android:attr/windowSplashScreenIconBackground' not found. my app gradle :- compileSdkVersion 34 , targetSdkVersion 34
|
1

The actual fix

The error happens because:

  1. @color/splash_color is missing
    → Add it in android/app/src/main/res/values/colors.xml:

    <resources>
    <color name="splash_color">#5C7CFF</color>
</resources>

  2. windowSplashScreenIconBackground only exists on API 31+
    → Keep that line inside values-v31/styles.xml only (not in values/styles.xml).

  3. Splash image size
    Android 12 enforces a max size (~200dp). If your PNG is too large, shrink it (e.g. 512×512) and regenerate with:

    flutter clean
flutter pub run flutter_native_splash:create

Minimal values-v31/styles.xml

<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <item name="android:windowSplashScreenBackground">@color/splash_color</item>
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash</item>
        <item name="android:windowSplashScreenIconBackground">@color/splash_color</item>
        <item name="postSplashScreenTheme">@style/NormalTheme</item>
    </style>
</resources>

That’s all that’s needed beyond what flutter_native_splash normally generates.

Once those resources exist and the image is resized, the logo will appear even on the very first launch on Android 12+.

Improve this answer

3 Comments

Welcome to Stack Overflow! A lot of the information in your answer is redundant with the information in an older, existing answer. Could you trim down yours to call out just the new information you are adding to the conversation?
I have trimmed it down. Please try now.
@AzizUrRehman , I did all the changes , app is running without any errors but still Logo is not getting displayed on 1st launch , I have added my new v-31 xml changes to my answer , please check if there is an issue in that.
-1

You can follow this configurations:

flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # dart run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # dart run flutter_native_splash:remove

  # IMPORTANT NOTE: These parameter do not affect the configuration of Android 12 and later, which
  # handle splash screens differently that prior versions of Android.  Android 12 and later must be
  # configured specifically in the android_12 section below.

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#cc9900"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  image: assets/icons/my_icon.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  branding: assets/branding/app_launcher_branding_2.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom
  
  # Set the branding padding from the bottom of the screen.  The default value is 0
  branding_bottom_padding: 24

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  color_dark: "#cc9900"
  #background_image_dark: "assets/dark-background.png"
  image_dark: assets/icons/my_icon.png
  branding_dark: assets/branding/app_launcher_branding_2.png

  # From Android 12 onwards, the splash screen is handled differently than in previous versions.
  # Please visit https://developer.android.com/guide/topics/ui/splash-screen
  # Following are specific parameters for Android 12+.
  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/icons/my_icon.png #I have no animation this time

    # Splash screen background color.
    color: "#cc9900"

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

    # The branding property allows you to specify an image used as branding in the splash screen.
    branding: assets/branding/app_launcher_branding_2.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    image_dark: assets/icons/my_icon.png #Follow the Android launcher icon guidelines for Android 12+
    color_dark: "#cc9900"
    icon_background_color_dark: "#cc9900"

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  android: true

I leave the comment as is to serve as a guide. Also, note that I am using flutter_native_splash: ^2.4.1, but you can use flutter_native_splash: ^2.4.6. Sometimes, using an outdated package causes you to experience some bugs.

Always remember to execute this command in terminal to apply changes:

dart run flutter_native_splash:create

As you notice in the above configuration, don't forget to handle dark mode in addition to the light mode (default) settings.

Optional, but it is useful in some cases. Execute this command in your terminal:

flutter create --platforms=android .

It will recreate your android folder. It will not break or misconfigure the existing configuration, particularly in your build.gradle, settings.gradle, etc.

One of the best fixes that you can do is to make your own splash screen/launch screen, and avoid using a package (i.e., flutter_native_splash) that could cause you unintended future bugs. Please read these references:

The main reason I'm telling you this is that I've already read about some experienced developers who opt out of using packages for their splash screens/launch screen/launcher icon because they can introduce bugs and are not easy to maintain.

For me, these were credible sentiments. It is a more reasonable and inarguably better option for better maintainability and scalability because you have more granular control, which allows you to handle it properly. This is better than relying on a package that does the work for you, which is not easy to resolve if it introduces bugs.

Improve this answer

13 Comments

I have gone through this instructions , it does not work. If its working for you , give me an link of a git from where I can run the sample and test the splash screen in my phone.
@Ramji, note that I'm not modifying XML files related to the splash screen by myself. I'll leave it to the package to avoid issues.
@Ramji, have you tried running the flutter_native_splash configuration on a newly created Flutter project alone, to see if it would work using only its own configuration? If it does, then replicate it in your main project.
yes , i did , it did not work for android 12
Weird, because I was using the exact configuration on Android 13 and 14. Again, I didn't modify any XML files (on Android) for the splash screen to work.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.