1

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:

a screenshot of a phone in landscape mode

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 same screenshot as above, but wrapped in a SafeArea widget

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?

Nathan Friend
  • 10,076
  • 8
  • 60
  • 114

0 Answers0