My solution to Flutter-Notch problem

[goliksim]

Problem with fullscreen app on Android phones with notch

The essence of the problem

I must say right away I'm not a pro in flutter and android development.


There is a problem on Android 9 and 10 devices with notch in full screen mode.

First you need to set the cutout mode by setting a style in your activity.
Edit style.xml file like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" >    
        <item name="android:windowLayoutInDisplayCutoutMode"> shortEdges </item>   <!-- most important thing --> 
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

To enable fullscreen mode we need to hide status bar and navigation bar. So at the start of the app add the following line...

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,overlays: [] );

And that's our problem. The display cutout overflows our app bar.




SafeArea does not help in this situation in any way.

So, the most obvious solution to the problem is to add an insert on top yourself. But it is necessary to somehow determine the presence of the notch and its height.

In the MainActivity file.kt there is a method for determining the height of the notch using kotlin

private fun adjustToolbarMarginForNotch() {
        // Notch is only supported by >= Android 9
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            val windowInsets = window.decorView.rootWindowInsets
            if (windowInsets != null) {
                val displayCutout = windowInsets.displayCutout
                if (displayCutout != null) {
                    val safeInsetTop = displayCutout.safeInsetTop  // safeInsetTop - our inset
                }
            }
        }
    }

But I haven't found a way to transfer the value to dart.

My solution

So my solution is to determine this inset just in dart. I found only one way to do that.

We can mesure it by systemGestureInsets which returns an area, where your tap belongs to status bar and not to our app.

Here is the discription from Google:
"Simple swipe gestures that start within the systemGestureInsets areas are used by the system for page navigation and may not be delivered to the app"

stdCutoutWidth = MediaQueryData.fromWindow(window).systemGestureInsets.top;

But there is an another problem. Standart android hight of status bar is 24dp. So, if we use this value, then we will have an insert on the device without a notch. To solve this, we can only use values that exceed the standard Android value.

stdCutoutWidth = stdCutoutWidth>=48? stdCutoutWidth: 0;

I am using 48 as standart, because, according to my practice, devices with notch usually return exactly this value.

We can also measure the insert for the bottom just in case for devices with both notches.

stdCutoutWidthDown = MediaQueryData.fromWindow(window).systemGestureInsets.bottom;
stdCutoutWidthDown = stdCutoutWidthDown>48? stdCutoutWidthDown/2: 0;

Finally add this insert as padding before scaffold.

Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.red, // your color
        padding: EdgeInsets.only(top: stdCutoutWidth*0.75,bottom: stdCutoutWidthDown*0.75),
        child:Scaffold(
          appBar: ...
          body: ...
        )
     );
}

Result

Conclusion

I am not sure that this method is absolutely correct.

I'm also not sure if it works correctly on all devices because it doesn't have an Android 9.10 device with notch.


So, correct me in the comments, offer your thoughts. If this method is not suitable for your device, let me know.

You can find files in my repository

[exaby73]

Hello @goliksim. Could you elaborate what the actual proposal is here? You have highlighted steps to take to "fix" the notch on some phones, but this doesn't look like a solution the framework could adopt. Could you provide a code sample that reproduces the issue and the solution? Which devices are you testing on?

[github-actions]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.