Flutter AppBar Customisation: Actions, Titles, and SliverAppBar

The app bar is the first thing users see on every screen, and Flutter's AppBar gives you a lot of control over it — title alignment, leading and trailing actions, colours, an attached tab bar, and, with SliverAppBar, a header that collapses elegantly as you scroll. This guide walks through the standard AppBar slots and then the scrolling SliverAppBar, with paste-ready code for each.

Every snippet below is paste-ready against current stable Flutter. The AppBar lives in the Scaffold's appBar slot, and the collapsing SliverAppBar builds on the slivers model — both are worth reading alongside this one.

Follow me on Instagram@sagnikteaches

We'll cover the title and centerTitle, the leading and actions slots, colours and elevation, the bottom slot for tabs, and the collapsing SliverAppBar with FlexibleSpaceBar.

Connect on LinkedInSagnik Bhattacharya

If watching helps, the channel builds custom and collapsing app bars into real screens so you can see the scroll behaviour in motion.

Subscribe on YouTube@codingliquids

Title, leading, and actions

The three slots you'll set most are title, leading (the start-side widget), and actions (a list of trailing widgets, usually icon buttons).

AppBar(
  title: const Text('Photos'),
  actions: [
    IconButton(icon: const Icon(Icons.search), onPressed: () {}),
    IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
  ],
)

You usually don't set leading at all: Scaffold fills it automatically with a back button on a pushed route, or a hamburger when a drawer is present. Set it yourself only to override that, and set automaticallyImplyLeading: false when you want no leading widget at all. For an overflow menu, make the last action a PopupMenuButton.

Centring the title

A frequent surprise: the title is centred on iOS but left-aligned on Android, because AppBar follows each platform's convention. Set centerTitle explicitly to take control.

AppBar(
  title: const Text('Settings'),
  centerTitle: true,   // centred on every platform
)

If you want one consistent look across platforms, set centerTitle here or once globally on the theme's AppBarTheme. Leaving it unset is fine too — it just means the title follows whatever the running platform prefers.

Colours and elevation

Style the bar with backgroundColor, foregroundColor (which tints the title and icons together), and elevation for the shadow under it. In Material 3 a subtle tonal overlay replaces a heavy shadow by default.

AppBar(
  title: const Text('Profile'),
  backgroundColor: Colors.indigo,
  foregroundColor: Colors.white,   // title + icons
  elevation: 0,
)

Setting these per-AppBar is fine for one-off screens, but for a consistent app define them once on ThemeData.appBarTheme so every screen's bar matches without repetition — the same theme-first discipline as the text theme.

The bottom slot: tabs

The bottom slot accepts any PreferredSizeWidget, and the usual occupant is a TabBar. Wrap the screen in a DefaultTabController so the tabs and their content stay in sync.

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Library'),
      bottom: const TabBar(tabs: [Tab(text: 'Songs'), Tab(text: 'Albums')]),
    ),
    body: const TabBarView(children: [SongsList(), AlbumsGrid()]),
  ),
)

The bottom slot isn't limited to tabs — any preferred-size widget works, such as a search field or a progress bar pinned under the title.

SliverAppBar: a collapsing header

For an app bar that shrinks as the user scrolls — the large-photo-header pattern — use SliverAppBar inside a CustomScrollView. With pinned: true it stays as a compact bar once collapsed; an expandedHeight and a FlexibleSpaceBar give it the tall, collapsing header.

CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,
      expandedHeight: 220,
      flexibleSpace: FlexibleSpaceBar(
        title: const Text('Mount Fuji'),
        background: Image.network(headerUrl, fit: BoxFit.cover),
      ),
    ),
    SliverList(/* content below */),
  ],
)

Toggle the behaviour with three flags: pinned keeps it on screen when collapsed, floating makes it reappear the moment you scroll up, and snap (with floating) animates it fully in or out. The full scrolling context behind this lives in the scrolling and slivers guide.

Common mistakes

• Fighting platform title alignment. Set centerTitle explicitly instead of expecting one default everywhere.
• Overriding leading unnecessarily. Scaffold supplies the back/hamburger button; only set leading to change it.
• Putting SliverAppBar in a normal body. It belongs inside a CustomScrollView, not a plain Scaffold.body.
• Cramming too many actions. Move secondary actions into a PopupMenuButton so the bar doesn't overflow.
• Styling each AppBar by hand. Set appBarTheme once for a consistent look across screens.

Frequently asked questions

How do I add buttons to a Flutter AppBar?

Pass a list of widgets (usually IconButtons) to actions; they appear after the title. Add a PopupMenuButton for an overflow menu.

Why is my AppBar title not centred in Flutter?

AppBar centres on iOS and left-aligns on Android by default. Set centerTitle: true (or false) to force a side everywhere.

What is a SliverAppBar in Flutter?

A scroll-aware app bar for a CustomScrollView. With pinned, floating, expandedHeight, and a FlexibleSpaceBar it can collapse a tall header to a compact bar.

How do I add tabs under a Flutter AppBar?

Put a TabBar in the bottom slot and wrap the screen in a DefaultTabController, with a TabBarView for the content.

Further reads

Keep going with the tutorials that pair with this guide:

• Flutter Development Guide 2026 — the full Flutter hub.
• Flutter Scaffold Explained — the frame the AppBar slots into.
• Flutter Scrolling and Slivers — the sliver model behind SliverAppBar.
• Flutter Icons and IconButton — the action buttons in your app bar.
• Flutter Material Widgets: The Complete Catalogue — every Material component in one place.

Sources: Flutter documentation — AppBar, SliverAppBar, FlexibleSpaceBar, TabBar, DefaultTabController, and AppBarTheme API references, plus the Material 3 top-app-bar guidance (docs.flutter.dev). Verified against current stable Flutter.