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?

Answer 1

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

Answer 2

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