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.
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