Flutter SafeArea：避免缺口，但忽略圆角

Question

Is there a way to detect and avoid notches in a phone's screen (for example, the camera notch in an iPhone X), but ignore a screen's rounded corners?

For example, here's my app in landscape mode on an iPhone with a notch:

The menu on the left is fine - the rounded corners of the screen don't interfere with the buttons.

The menu on the right is obviously problematic - the notch almost completely obscures the middle button.

I've played around with the SafeArea widget , but this widget avoids both notches and rounded corners, which results in a layout like this:

The right menu is reasonably positioned (even though it's ugly), but now the left menu bar is floating away from the edge of the screen in an attempt to avoid the rounded corners.

How can I get the best of both worlds? I'd like the left menu bar from my first screenshot, and the right bar from the second. Is there a way to configure the SafeArea widget to avoid notches but not rounded corners?

Answer 1

I just came across this in investigating https://github.com/flutter/flutter/issues/102263 . The margins that are being applied are correct for the device, but you may want to compose the SafeArea differently.

I would explore a SafeArea inside of the widget that is inset unexpectedly. If it is a widget from the Flutter framework, please file an issue on github with a reproducible code sample and we can take a look.

Wrapping it around the content within the widget is how the AppBar works to extend up into the status bar area. Please see the linked issue for more context and references.