Skip to main content

SafeArea

SafeArea applies padding derived from the current platform window insets.

In practical terms, it keeps content away from areas such as mobile notches, rounded corners, system status bars, or other host-defined unsafe edges. On desktop, those insets are often effectively zero. On mobile and some browser embeddings, they matter a great deal.

Use SafeArea near the root of full-screen screens or overlays that should respect platform edges. Do not use it as a substitute for ordinary design padding. If the goal is visual spacing rather than host insets, use Container or standard layout gap instead.

Example​

use fission::core::ui::{Column, SafeArea, Text};

let node = SafeArea {
    child: Box::new(
        Column {
            gap: Some(12.0),
            children: vec![
                Text::new("Messages").into_node(),
                Text::new("Compose").into_node(),
            ],
            ..Default::default()
        }
        .into_node(),
    ),
    ..Default::default()
}
.into_node();

Field table​

FieldTypeMeaningNotes / default behavior
idOption<NodeId>Stable node identity.Defaults to None.
childBox<Node>The content that should be padded away from unsafe edges.Required. Default uses an empty spacer child.

Mobile and responsive behavior​

SafeArea reads env.window_insets from the current environment and turns those insets into box padding. The padding order is [left, right, top, bottom], and the wrapper uses flex_grow: 1.0 so it behaves naturally as a screen root.

This is why SafeArea belongs in responsive and mobile-aware layouts: it connects platform shell information to ordinary widget composition without forcing every child to know about device edges.

Specific advice​

Apply SafeArea high enough in the tree that the whole screen respects unsafe edges, but not so broadly that deeply nested components accidentally inherit platform-specific spacing they should not know about.

A common pattern is SafeArea at the screen root, followed by Scroll or a Column inside it.

Container, Scroll, Column, and Positioned.