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.

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 - a fixed-height application bar.

• Collapsible AppBar: When enableCollapsibleAppBar is true, this widget behaves exactly like Flutter's SliverAppBar - a material design app bar that can expand, collapse, and float based on scroll position.

📚 Learn More:

• Flutter AppBar documentation

• Flutter SliverAppBar documentation

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