# 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-35a4b9aaddeb8f5e72c85698990362ed3dd9930a%2Fscaffold.png?alt=media" 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.