Statusbar padding even when hidden (flutter)

user_5437363 0
Viewed 280

I'm trying to make an immersive view, where nothing is over the widget.

But even with SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive), the status bar still takes a place where it used to be.

For a test widget, this is what I used

return Container(color: Colors.red);

That is the entire widget, yet it still has a status bar padding

enter image description here

When I use a Scaffold, I can draw behind the Status Bar, but when there is no Status Bar, it still takes up the extra space.

flutter
3 Answers

Apparently using

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

In styles.xml fixed it, because my emulator had a simulated cutout

user_54373630

This should do the trick

void main() {
      SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
      runApp(MyApp());
    }

You can also make it transparent

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent, ));
user_158077800

Go to android\app\src\main\res\values. Open styles.xml and below this:

     This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">?android:colorBackground</item>

Add this:

<item name="android:windowFullscreen">true</item>
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

Now status bar behaves like in a game: no status bar, but if you swipe down - the status bar is appearing Also, there is no padding even if the device screen has cutout.

user_85186600
Related