Safe Area

The Safe Area widget ensures that its child content doesn’t get hidden behind system UI like the status bar, navigation bar, home indicator, or device notches. It automatically adds padding so your UI stays within the “safe” visible area of the screen.

The Safe Area widget ensures content stays within the visible area, avoiding system UI intrusions.

Core Concepts

• System Intrusions

  • Areas occupied by system UI:

    • Status bar (top)

    • Notch / camera cutout

    • Navigation bar / gesture bar (bottom)

  • Safe Area avoids these so your content is never hidden or overlapped.

• Automatic Padding

  • Safe Area calculates how much space is needed on each edge and applies padding to the child widget.

  • You can choose which sides (left/top/right/bottom) should respect the safe area.

• Per-Side Control

  • Sometimes you only want safe spacing at the top (for the notch) but want edge-to-edge content at the bottom (e.g., full-screen image).

  • The left, top, right, and bottom properties control this behavior.

Properties

Property	Description
left	If true, applies safe padding on the left side to prevent content from overlapping device curves or intrusions.
top	If true, applies safe padding on the top side to avoid the status bar and notches.
right	If true, applies safe padding on the right side to prevent clipping on curved or intruded areas.
bottom	If true, applies safe padding on the bottom side to avoid navigation bars or gesture/home indicators.

Default Properties

The Safe Area widget supports all Default Properties.

Use Cases

You should use Safe Area when:

• Your screen has content near the top (titles, search bars, tabs) that might clash with the status bar or notch.

• You’re designing for phones with curved edges or punch-hole cameras and want to avoid clipping important content.

• You’re building full-screen layouts (e.g., detail pages, forms, lists) where headers or footers could overlap with:

  • Status bar

  • Navigation bar

  • Gesture/home indicator

• You want a single layout that looks correct across:

  • iOS & Android

  • Different screen sizes

  • Devices with/without notches

Typical scenarios:

• Wrapping the entire page in Safe Area so all content is protected.

• Wrapping only header / top sections to avoid the notch, while letting the rest be edge-to-edge.

• Wrapping bottom buttons or navigation sections to keep them above the gesture bar or system navigation.