Flutter hide status bar add space with black background

95 views Asked by At

When I click on an item in Flutter I want the status bar to be hidden so that the item I've clicked on is displayed full-screen without any other visual elements. However, when I try to do this, the status bar ends up displaying a black background that displaces all the content, as can be seen in the images. The image on the right hides the elements in the status bar after a few seconds, but the black block that appeared behind it remains visible.

enter image description here

To see more, I've recorded a video here

I tried to change the styles.xml but it doesn't change anything.

I set this SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]); but any other parameter, like immersiveSticky has the same behavior when adding the black block.

Here is my dart code:

InkWell(
          onTap: () {
            if (showAppBar) {
              SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);
              setState(() {
                showAppBar = false;
              });
            } else {
              SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
              setState(() {
                showAppBar = true;
              });
            }
          },
        child: ...
),

Here is my styles.xml :

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

Thank you for your help

0

There are 0 answers