# Safe Area

{% embed url="<https://youtu.be/ffflBgt6f14?si=ulSx4fnvkhdVt8Qz>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=ffflBgt6f14>

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.

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-2a1207e1c7b4cacfdaa3d82fbca0d593ca1f0be9%2Fsafearea.png?alt=media" alt="A diagram showing how Safe Area widget prevents content from being hidden behind system UI elements like status bar and notch."><figcaption><p>The Safe Area widget ensures content stays within the visible area, avoiding system UI intrusions.</p></figcaption></figure>

### **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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

### **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.