Flutter splash screen not hiding bottom bar

Question

I have added an splash screen on my flutter app (on Android side) like this:

Opening the values/styles.xml and adding the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->

        <!--following 2 lines modified by me-->

        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name= "android:windowFullscreen">true</item>
    </style>
</resources>

However, when I run the app in real device, the splash screen shows a weird behaviour:

I am not sure how many seconds the splash is shown but, for the example, let's say it lasts for 3 seconds, well, on the first 1 or 1.5 seconds, the bottom of the screen looks like this, showing the bottom software buttons:

After these 1 or 1.5 secs, the bottom bar goes away and the splash screen is shown as expected for another 1 or 1.5 secs, then the app starts.

How to fix this so that the splash covers the whole screen from the beginning?

Answer 1

In MainActivity.java

write this:

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    this.getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}