App Bar

The PrimeAppBar is used to display the title, leading widget (e.g. back button), actions, and bottom widgets (e.g. TabBar).

Basic Usage

A simple app bar with a title and a leading icon.

PrimeAppBar(
  title: Text('Basic AppBar'),
  leading: Icon(PrimeIcons.viamFlutter),
)

With Actions

You can add action buttons to the right side of the app bar.

PrimeAppBar(
  title: Text('With Actions'),
  leading: Icon(PrimeIcons.viamFlutter),
  actions: [
    Icon(PrimeIcons.viamFlutter),
    Icon(PrimeIcons.viamFlutter),
  ],
)

With Bottom Widget

You can display a widget at the bottom of the app bar, such as a TabBar.

PrimeAppBar(
  title: Text('With Bottom'),
  leading: Icon(PrimeIcons.menu),
  bottom: TabBar(
    selectedIndex: 0,
    onDestinationSelected: (_) {},
    items: [
      Text('Tab 1'),
      Text('Tab 2'),
      Text('Tab 3'),
    ],
  ),
)

Left-aligned Title

By default, the title is centered and stacked over the leading and actions slots — best for short, fixed titles. Pass centerTitle: false to switch to a horizontal Row layout: leading + title + actions sit side by side, the title takes remaining space and ellipses cleanly against the actions, and the leading slot is no longer constrained to icon width (use it for an org switcher, breadcrumb, etc.).

PrimeAppBar(
  centerTitle: false,
  leading: Icon(PrimeIcons.menu),
  title: Text(
    'A long left-aligned title',
    overflow: TextOverflow.ellipsis,
  ),
  actions: [
    Icon(PrimeIcons.viamFlutter),
    Icon(PrimeIcons.viamFlutter),
  ],
)