SplashScreen Support for Android12 in Flutter

SplashScreen basically, the SplashScreen is the first screen that appears when the user opens up any application.

So, it is mandatory that SplashScreen must be innovative as well as eye-catching. No one will like to see a black/white screen at first.

Read about the variety of Flutter App Development Services offered by Mobikul

In Flutter, we have two options to add on SplashScreen in the app

With the help of Native Code in the ic_launcher_background.xml file
We can even customize the SplashScreen with the help of widgets

We have learned about the methods to create SplashScreen in Flutter but writing the code within just the ic_launcher_background.xml file was supported till Android11.

If you will try to run the same app in Android12, it will display a black screen with a logo in the center.

So, Now comes the issue, that How can we have a Splash Screen which supports the Android12?

Implementation of SplashScreen Support for Android12 in Flutter

Let’s start the implementation-

Step – 1 -> Firstly, we will need to create an Android Resource Directory in the android -> app folder, where the resource type will be “values“.

While creating the directory, we will need to add the version from “Available Qualifiers” and set it as 31.

After creating the directory, we will find it on the path android/app/main/res/values-v31

Step – 2 -> Create a new file named “styles.xml” and add the following code-

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <style name="Theme.App.Start" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@android:color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher</item>
        <item name="postSplashScreenTheme">@style/LaunchTheme</item>
    </style>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<item name="windowSplashScreenBackground">@android:color/white</item>

<item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher</item>

<item name="postSplashScreenTheme">@style/LaunchTheme</item>

</style>

</resources>

Here, we have added the windowSplashScreenBackground, windowSplashScreenAnimatedIcon and postSplashScreenTheme.

windowSplashScreenBackground – It specifies the background color for the SplashScreen.

windowSplashScreenAnimatedIcon – It specifies the path of the icon for the SplashScreen.

postSplashScreenTheme – It specifies the Theme that will be launched after the SplashScreen has completed the loading.

Step – 3 -> After that we will have to add a dependency on android/app/build.gradle level

dependencies {
        implementation 'androidx.core:core-splashscreen:1.0.0-alpha01'
}

dependencies {

implementation 'androidx.core:core-splashscreen:1.0.0-alpha01'

}

Step – 4 -> We will have to write a few lines of code in Main.Activity file either in JAVA or in Kotlin.

SplashScreen splashScreen = SplashScreen.installSplashScreen(this);
        super.onCreate(savedInstanceState);

1 2	SplashScreen splashScreen = SplashScreen.installSplashScreen(this); super.onCreate(savedInstanceState);

Step – 5 -> Now, we will have to add the Theme we have created into the AndroidManifest.xml file.

 <activity
            android:name="com.example.flutter_app.MainActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:launchMode="singleTop"
            android:theme="@style/Theme.App.Start"
            android:exported="true"
            android:windowSoftInputMode="adjustResize">

<activity

android:name="com.example.flutter_app.MainActivity"

android:hardwareAccelerated="true"

android:launchMode="singleTop"

android:theme="@style/Theme.App.Start"

android:exported="true"

android:windowSoftInputMode="adjustResize">

After writing this code, if we try to run your app on the device, it will still not show the Splash Image

The reason is that it will still not able to detect the correct theme for the Android12, so we will need to add the theme details in the styles.xml file in the values folder as well.

   <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>

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

</style>

Conclusion

In this blog, we have discussed how can we add Splash Screen in Flutter Apps running on devices having Android 12.

You may also check out our blog on Android12 Splash Screen API in Android – https://mobikul.com/android-12-splash-screen-api/

I hope it will help you out in understanding.

Thanks for reading!!

References

https://docs.flutter.dev/development/ui/advanced/splash-screen

flutter

Tanya Goel 27 April 2023

. . .

SplashScreen Support for Android12 in Flutter

Implementation of SplashScreen Support for Android12 in Flutter

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!