SafeArea
Pads its object away from device notches and system bars.
Clear of notches and system bars
SafeArea pads its object by the device's safe-area insets: the notch, the rounded corners and the home indicator of a phone. On a screen without them the padding is zero, so this preview looks the same with or without it; open the page on a phone held sideways to see the difference.
SafeArea(
.config(edges: x)
.obj(
Row(
.config(
w: fill
color: panel
cornerRadius: 12
padding: all(14)
xAlign: between
yAlign: mid
)
Text(.config(weight: semibold) .obj('Room B'))
Text(.config(color: muted) .obj('Available'))
)
)
)edges chooses which sides: all (the default), top, bottom, x (left and right) or y (top and bottom). A Scaffold already keeps its content inside the safe area, so SafeArea is for full-bleed parts you place yourself.
Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
edges | all | top | bottom | x | y | all | Which edges to protect. |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.obj: one object, the default slot