SafeArea

Insets its content to avoid system intrusions — the status bar, notch, home indicator, and rounded corners. Wrap your top-level screen content in it.

Example

safe_area(
  container(
    expand: true,
    padding: 16,
    content: column(children: [text("Hello"), filled_button(content: text("Go"))])
  ),
  expand: true
)

Common properties

• content — the child control (also accepts a positional argument)
• avoid_intrusions_top / avoid_intrusions_bottom
• avoid_intrusions_left / avoid_intrusions_right
• minimum_padding
• maintain_bottom_view_padding

Usage

safe_area is typically the outermost control of a screen, with expand: true so it fills the view. Disable a specific edge when you want content to run to the screen edge there (for example a full-bleed image under the status bar).

Complete API

Helpers

• safe_area(content = ..., **props)
• safearea(content = ..., **props)

Accepted properties

• adaptive — Adapts to the platform (Material/Cupertino) when true.
• align — Alignment of the control within its parent.
• animate_align — Animates alignment changes.
• animate_margin — Animates margin changes.
• animate_offset — Animates offset changes.
• animate_opacity — Animates opacity changes.
• animate_position — Animates position changes.
• animate_rotation — Animates rotation changes.
• animate_scale — Animates scale changes.
• animate_size — Animates size changes.
• aspect_ratio — Width-to-height ratio to maintain.
• avoid_intrusions_bottom — Sets the avoid intrusions bottom property.
• avoid_intrusions_left — Sets the avoid intrusions left property.
• avoid_intrusions_right — Sets the avoid intrusions right property.
• avoid_intrusions_top — Sets the avoid intrusions top property.
• badge — Badge drawn on the corner of the control.
• bottom — Bottom offset when positioned inside a stack.
• col — Responsive column span (1-12) per breakpoint.
• content — The single child control rendered inside this control.
• data — Arbitrary value you can attach to the control and read back in handlers.
• disabled — Disables interaction when true.
• expand — Fills the available space along the parent's main axis when true.
• expand_loose — Like expand, but only grows up to the child's natural size.
• height — Fixed height in logical pixels.
• key — Stable identity used to preserve state across rebuilds.
• left — Left offset when positioned inside a stack.
• maintain_bottom_view_padding — Maintain bottom view padding.
• margin — Outer spacing around the control.
• minimum_padding — Minimum padding.
• offset — Translation offset applied to the control.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• right — Right offset when positioned inside a stack.
• rotate — Rotation applied to the control.
• rtl — Renders right-to-left when true.
• scale — Scale transform applied to the control.
• size_change_interval — Throttle interval for on_size_change, in ms.
• tooltip — Text shown on hover/long-press.
• top — Top offset when positioned inside a stack.
• visible — Hides the control when false.
• width — Fixed width in logical pixels.

Events

• on_animation_end — Fired when an animation completes.
• on_size_change — Fired when the control's size changes.

Wire reference

• Family: shared
• Widget type: safearea