Flutter - Notch Area is blank when status bar is disabled

Question

This is how my app looks normally:

I would like to make the status bar area and bottom navigation bar hidden so that image is shown in fullscreen.

• Tried SystemChrome.setEnabledSystemUIOverlays([]); The status bar area is hidden but there is a black or blank area at the status bar

• If I set SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

then I'm getting the same result as [image1][1]

• If I set SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

I'm getting this weird looking navbar and status bar is still there

• If I set SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

status bar area is black and navbar appears

Tried with and without safearea. Still not getting the desired fullscreen.

Is there any way we can make the status bar hidden(without creating blank area) and hide navbar making the image fullscreen i.e even utilizing the notch side area?

Havstad

@Edman Thanks. Anyone any solution to this? – Havstad

Answer 1

It's easy way.You can fix this by wrapping your body into a SafeArea

Scaffold(
  body: SafeArea(
    child: Text("Hello"),
  ),
),

Protrusile

This solution doesn't work in Flutter version 1.17, not sure about other versions – Resa

Answer 2

Adding the following line in styles.xml will solve the problem

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

Reference : https://github.com/flutter/flutter/issues/46486

Resa

This is the correct answer instead of SafeArea - this doesn't work. – Dichromic

For my Flutter project, I added this line in both android/app/src/main/res/values/styles.xml and android/app/src/main/res/values-night/styles.xml – Gladi

Answer 3

By adding first line code in styles.xml and second line code where your want to overlay on notch.

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

SystemChrome.setEnabledSystemUIOverlays([]);

How should your styles.xml file looks like after making changes.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         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>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

Helped : Github issue link

Persia

Answer 4

a lot of people mentioned we need to add

<item name="android:windowBackground">?android:colorBackground</item>

in values > styles.xml under NormalTheme and set the system chrome ui modes accordingly.

However most people miss to mention to add it under values-night > styles.xml as well.It turned out my device was in dark mode and thereforce setting it in only values>styles was not showing any effect. Hope it helps someone else out there

Landers

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Seismology