A visual guide to Flutter’s SafeArea widget

This is a repost of an answer I wrote on StackOverflow.

SafeArea is basically a glorified Padding widget. If you wrap another widget with SafeArea, it adds any necessary padding needed to keep your widget from being blocked by the system status bar, notches, holes, rounded corners and other "creative" features by manufactures.

Here is an example without SafeArea set:

Align(
  alignment: Alignment.topLeft,  // and bottomLeft
  child: Text('My Widget: ...'),
)

And again with the widget wrapped in a SafeArea widget:

Align(
  alignment: Alignment.bottomLeft,  // and bottomLeft
  child: SafeArea(
    child: Text('My Widget: ...'),
  ),
)

You can set a minimum padding for edges not affected by notches and such:

SafeArea(
  minimum: const EdgeInsets.all(16.0),
  child: Text('My Widget: ...'),
)