# Scaffold

{% embed url="<https://youtu.be/UJ0OzpgdsQ8?si=-bGv3zN1iRbIGeJO>" %}

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

The **Scaffold** widget provides a **structured layout for a screen** in your app.\
It gives you predefined slots for common UI regions like:

* **App Bar** (top)
* **Body** (main content)
* **Bottom Navigation Bar** (bottom)

This helps you build consistent, reusable screen layouts without manually arranging these elements every time.

<figure><img src="/files/WnTahR76dk2H8xdlUYLS" alt="A demonstration of the Scaffold widget showing the structured layout with App Bar at top, Body in center, and Bottom Navigation Bar at bottom."><figcaption><p>The Scaffold widget provides a structured layout for a screen with predefined slots for App Bar, Body, and Bottom Navigation Bar.</p></figcaption></figure>

> 📚 **Learn More**: To understand the underlying Flutter implementation, see the [Flutter Scaffold documentation](https://api.flutter.dev/flutter/material/Scaffold-class.html).

### **Use Cases**

Use **Scaffold** whenever you’re building a full screen, such as:

* 🌐 **Main app screens**
  * Home, Dashboard, Profile, Settings, Product Listing, etc.
* 🧭 **Apps with tab or bottom navigation**
  * Screens that need a persistent bottom navigation bar.
* 📱 **Standard page layouts**
  * Screens with a top App Bar and scrollable content below.
* 🔁 **Reusable screen templates**
  * Define a common structure (App Bar + Body + Bottom Nav) and reuse it across multiple pages for consistent UX.

Typical scenarios:

* A product listing screen:
  * `appBar`: title + search icon
  * `body`: product grid/list
  * `bottomNavigationBar`: app-wide navigation tabs
* A profile screen:
  * `appBar`: back button + title
  * `body`: user info, settings, actions

Scaffold makes sure all these pieces sit in the right place without you managing positioning manually.

### **Core Concepts**

* **Screen Shell / Layout Frame**
  * Scaffold acts as the **outer frame** of a page.
  * It organizes top, bottom, and center content into predictable, platform-friendly positions.
* **Dedicated Slots**
  * Instead of nesting a bunch of containers manually, you plug widgets into named slots:
    * `appBar` for header/navigation bar.
    * `body` for main UI.
    * `bottomNavigationBar` for tab bars or primary navigation.
* **Safe Area Integration**
  * With `enableSafeArea = true`, the `body` is automatically wrapped in a **Safe Area** to avoid:
    * Status bar
    * Notch
    * Navigation bar / gesture area
  * This keeps content visible and unclipped across devices.
* **Background Styling at Screen Level**
  * `scaffoldBackgroundColor` lets you define the **background color for the entire screen**, not just the body, ensuring consistent visual design.

### Properties

| Property                  | Description                                                                                                                                                                                       |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `scaffoldBackgroundColor` | Sets the background color for the entire screen area managed by the Scaffold. This color appears behind the body, app bar, and any empty spaces.                                                  |
| `enableSafeArea`          | If `true`, automatically wraps the `body` in a Safe Area to avoid system intrusions (notch, status bar, navigation bar). This ensures that your main content doesn’t get hidden behind system UI. |

#### Children of Scaffold

| Children              | Description                                                                                                                    | Allowed Widgets                        |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- |
| `appBar`              | The area at the top of the screen for the App Bar. Typically used for titles, actions, navigation icons.                       | `AppBar`                               |
| `bottomNavigationBar` | The area at the bottom of the screen for primary navigation or tabs. It stays fixed while the body content changes or scrolls. | `NavigationBar`, `NavigationBarCustom` |
| `body`                | The main content area of the screen. This is where most of your page UI lives.                                                 | Any widget                             |

### Default Properties

The **Scaffold** widget **does not** use the standard default properties like `width`, `height`, `padding`, etc.\
Instead:

* Its **layout & appearance** are controlled via:
  * `scaffoldBackgroundColor`
  * `enableSafeArea`
  * The widgets you place in its **slots** (`appBar`, `body`, `bottomNavigationBar`).

In practice, Scaffold is meant to be the **root layout** of a screen, so you don’t usually resize or position it— you structure the content inside its children.


---

# 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/scaffold.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.