# 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="" %} Watch this on Youtube: ### 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