# AppBar

The AppBar widget is a standard application bar that appears at the top of the screen. It can contain a title, leading and trailing action buttons, and a flexible space for collapsible headers.

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

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

### Core Concepts

1. **Top Navigation & Context Bar**\
   The **AppBar** is the **top bar** of a screen. It gives users:
   * **Context** → title, page name, or branding
   * **Navigation** → back button, close button, menu icon
   * **Quick actions** → search, filter, notifications, more menu
2. **Consistent Structure Across Screens**\
   The AppBar keeps your app feeling **consistent**:
   * Same height and placement on each screen
   * Familiar layout: leading (left) → title → actions (right)
   * Can optionally include tabs, avatars, or secondary text
3. **Leading, Title, Actions**
   * **Leading**: back arrow, menu icon, logo, or avatar
   * **Title**: screen name or key label (e.g., “Orders”, “Profile”)
   * **Actions**: icons/buttons for high-frequency actions (search, sort, cart, settings)

### Flutter Implementation Reference

The AppBar widget is based on Flutter's material design components:

* **Regular AppBar**: When `enableCollapsibleAppBar` is `false` (default), this widget behaves exactly like Flutter's [AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html) - a fixed-height application bar.
* **Collapsible AppBar**: When `enableCollapsibleAppBar` is `true`, this widget behaves exactly like Flutter's [SliverAppBar](https://api.flutter.dev/flutter/material/SliverAppBar-class.html) - a material design app bar that can expand, collapse, and float based on scroll position.

> 📚 **Learn More**:
>
> * [Flutter AppBar documentation](https://api.flutter.dev/flutter/material/AppBar-class.html)
> * [Flutter SliverAppBar documentation](https://api.flutter.dev/flutter/material/SliverAppBar-class.html)

### Properties

#### General Properties

| Property                    | Description                                                               |
| --------------------------- | ------------------------------------------------------------------------- |
| `backgroundColor`           | The background color of the AppBar.                                       |
| `elevation`                 | The z-axis elevation of the AppBar, which creates a shadow effect.        |
| `shadowColor`               | The color of the shadow.                                                  |
| `centerTitle`               | If `true`, the title will be centered horizontally.                       |
| `titleSpacing`              | The spacing around the title.                                             |
| `automaticallyImplyLeading` | If `true`, a leading back button will be automatically added if possible. |
| `defaultButtonColor`        | The default color for action buttons in the AppBar.                       |
| `visibility`                | If `false`, the AppBar will be hidden.                                    |

#### Title Properties

| Property    | Description                                |
| ----------- | ------------------------------------------ |
| `text`      | The text to display as the title.          |
| `textStyle` | The TextStyle for the title.               |
| `alignment` | The alignment of the title.                |
| `maxLines`  | The maximum number of lines for the title. |
| `overflow`  | How title overflow is handled.             |

#### Collapsible AppBar Properties

| Property                  | Description                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------- |
| `enableCollapsibleAppBar` | If `true`, enables the collapsible app bar functionality.                                 |
| `expandedHeight`          | The height of the AppBar when fully expanded.                                             |
| `collapsedHeight`         | The height of the AppBar when fully collapsed.                                            |
| `pinned`                  | If `true`, the AppBar will remain visible at the top of the screen when scrolling.        |
| `floating`                | If `true`, the AppBar will become visible as soon as the user scrolls up.                 |
| `snap`                    | If `true`, the AppBar will snap into view when scrolling up.                              |
| `useFlexibleSpace`        | If `true`, allows the use of a flexible space widget for more complex background effects. |
| `titlePadding`            | The padding around the title in the flexible space.                                       |
| `collapseMode`            | The collapse mode for the flexible space (`parallax`, `pin`, `none`).                     |
| `expandedTitleScale`      | The scale of the title when the AppBar is fully expanded.                                 |

#### Shape Properties

| Property       | Description                                                |
| -------------- | ---------------------------------------------------------- |
| `value`        | The shape of the AppBar.                                   |
| `borderRadius` | The corner radius for a rounded rectangle shape.           |
| `eccentricity` | The eccentricity for a continuous rounded rectangle shape. |
| `borderColor`  | The color of the border.                                   |
| `borderWidth`  | The width of the border.                                   |
| `borderStyle`  | The style of the border.                                   |

#### Children of AppBar

| Slot         | Description                                                                            |
| ------------ | -------------------------------------------------------------------------------------- |
| `title`      | A custom widget to use as the title, which will override the default title properties. |
| `leading`    | A widget to display before the title (e.g., a menu icon or back button).               |
| `actions`    | A list of widgets to display after the title (e.g., action buttons).                   |
| `bottom`     | A widget to display at the bottom of the AppBar (e.g., a TabBar).                      |
| `background` | A widget to display as the background of the flexible space.                           |

***

### Default Properties

The AppBar widget does not have the standard default properties. Its appearance and behavior are controlled by the properties and children listed above.

### Use Cases

Use **AppBar** when you want to:

* **Show which screen the user is on**
  * “Home”, “Explore”, “Cart”, “Settings”, “Order Details”, etc.
* **Provide navigation controls**
  * Back/close button for detail pages
  * Drawer/menu button for opening side navigation
* **Expose key actions**
  * Search, filter, sort, cart, share, edit, more options
  * Notification bell or profile shortcut
* **Brand the experience**
  * Show logo, brand colors, or a custom styled top bar


---

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