SafeArea
The SafeArea widget is a layout widget that places its child inside the safe area of the screen, clear of system UI such as the notch, status bar, and home indicator.
It automatically avoids the screen intrusions that differ from device to device, so your main content is never covered.
Definition and role
The SafeArea widget insets its child by the media safe padding — the status bar, notch, home indicator, and so on. Turn the inset off per edge (top, bottom, left, or right), and set a minimum inset to apply when there is no safe area.
- Category: Layouts
- Default edges: top, bottom, left, and right are all on
- Default minimum inset:
0
Features
| Feature | Description |
|---|---|
| Safe area placement | Places the child in the area clear of system UI such as the notch, status bar, and home indicator. |
| Per-edge control | Turns the inset on or off individually for the top, bottom, left, and right edges. |
| Minimum inset | Sets the minimum inset (minimum) to apply when the system provides no safe area. |
| Bottom padding retention | Sets whether to keep the bottom inset when the bottom view padding changes — when the keyboard appears, for example. |
How to use
- Open the Layouts category in the left widget palette.
- Drag and drop the SafeArea item onto the canvas.
- Put the widget you want inside the safe area into SafeArea.
- Adjust the per-edge settings (
top,bottom,left,right) and the minimum inset (minimum) as needed.
Properties
| Property | Description | Default | Value / type |
|---|---|---|---|
left | Whether to inset by the left safe area | On (true) | True / false |
top | Whether to inset by the top safe area — the status bar and notch | On (true) | True / false |
right | Whether to inset by the right safe area | On (true) | True / false |
bottom | Whether to inset by the bottom safe area — the home indicator and similar | On (true) | True / false |
minimum | Minimum inset to apply when the system provides no safe area | 0 | Inset value |
maintainBottomViewPadding | Whether to keep the bottom inset when the bottom view padding is consumed, by the keyboard for example | On (true) | True / false |
Notes and tips
Use top, bottom, left, and right to turn the safe area off per edge. To apply it only at the top, for example, turn the other three off.
minimum applies as a floor only when the system safe area is smaller. When the safe area is larger, its value wins.
Learn more
For the full set of Widget Control items (Property, Method, and Event) that script this widget, visit SafeArea Widget Control.