'Flutter: Draw/extend within notch area in landscape mode

Objective: Extend into/draw within android notch area, specifically in landscape mode. Testing with 2 physical devices results in the notch area being unusable (black) in landscape mode.

Note: Utilising extendBodyBehindAppBar, ExtendBody and SystemChrome.setEnabledSystemUI mode etc successfully extends into the notch area in PORTRAIT mode, however when the screen is rotated to landscape, the notch area is truncated and not utilised.

Problem: When extending the screen in landscape mode on most devices with curved corners the screen looks stupid and imbalanced with a squared-off black area in the notch section and curved at the other end.

Cheers guys.

flutterfullscreenextendlandscapeapache-calcite


Solution 1:[1]

Turns out, as it currently stands it's an open issue. See Github issue #59236 https://github.com/flutter/flutter/issues/59236

On NATIVE Android 3 options exist to control drawing in the cut-out 'notch' area:

LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT

  • This is the default behaviour. Content renders into the cut-out area while in portrait mode, but content is letterboxed while in landscape mode. LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
  • Content renders into the cutout area in both portrait and landscape modes. LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
  • Content never renders into the cutout area.

Further native Android information can be found here: https://developer.android.com/guide/topics/display-cutout

As it stands, the native Android equivalent of LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT seems to be stuck on flutter.

If anyone manages to work around this (perhaps platform channel stuff?), please comment.

Solution 2:[2]

I've faced the same problem, but looks like in addition to

SystemChrome.setEnabledSystemUIOverlays([]);

we should add the following to Android style.xml:

<style name="AppTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

Tested this on a flutter demo project with Samsung S21 Ultra that has a notch and everything works as expected in a portrait and landscape modes.

Please note that I use flutter 1.22.6, but I am sure that the same approach should work on the latest flutter.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mark Bowler
Solution 2 Standy

Related Questions