Top Bar

Top bars display the screen name and provide quick access to navigation and actions at the top of the screen, helping people orient themselves and complete tasks.

Common Alternative Names:
App bar, Navigation bar, Header

---

Variants

Top Bar variants control how the title and content are laid out.

Center Title

Traditional app bar layout with centered title, suitable for most screens.

Preview

Code

TopBar(
  title: 'Center Title',
  type: TopBarType.centerTitle,
)

---

Left Title

Left-aligned title for hierarchical navigation or content-heavy screens.

Preview

Code

TopBar(
  title: 'Left Title',
  type: TopBarType.leftTitle,
)

---

Large Title

iOS-style large title with optional subtitle, perfect for primary navigation screens.

Preview

Code

TopBar(
  title: 'Large Title',
  subtitle: 'With optional subtitle',
  type: TopBarType.largeTitle,
)

---

With Actions

Add action buttons to the right side of the top bar.

Preview

Code

TopBar(
  title: 'With Actions',
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

---

Properties

Property	Type	Description
title	String?	The primary text displayed in the top bar.
subtitle	String?	Optional secondary text displayed below the title in largeTitle type.
type	TopBarType	The layout style of the top bar.
actions	List<Widget>?	Optional list of widgets to display on the right side.
leadingWidget	Widget?	Custom widget to replace the default back button.
backgroundColor	Color	Background color of the top bar.
textColor	Color	Color applied to the title and subtitle text.
leadingSize	double?	Size of the leading icon when using default back button.
padding	EdgeInsetsGeometry	Padding applied to the content of the top bar.