# 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="/files/y2iNK2vYoBN0v8Igta6s" 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](/ui-building-blocks/widgets/default-properties.md).

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/layout-structure-widgets/safe-area.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.