SliverAppBar class

A Material Design app bar that integrates with a CustomScrollView.

An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. App bars typically expose one or more common actions with IconButtons which are optionally followed by a PopupMenuButton for less common operations.

Sliver app bars are typically used as the first child of a CustomScrollView, which lets the app bar integrate with the scroll view so that it can vary in height according to the scroll offset or float above the other content in the scroll view. For a fixed-height app bar at the top of the screen see AppBar, which is used in the Scaffold.appBar slot.

The AppBar displays the toolbar widgets, leading, title, and actions, above the bottom (if any). If a flexibleSpace widget is specified then it is stacked behind the toolbar and the bottom widget.

SliverAppBar(
  expandedHeight: 150.0,
  flexibleSpace: const FlexibleSpaceBar(
    title: Text('Available seats'),
  ),
  actions: <Widget>[
    IconButton(
      icon: const Icon(Icons.add_circle),
      tooltip: 'Add new entry',
      onPressed: () { /* ... */ },
    ),
  ]
)

Animated Examples

The following animations show how app bars with different configurations behave when a user scrolls up and then down again.

• App bar with floating: false, pinned: false, snap: false:

• App bar with floating: true, pinned: false, snap: false:

• App bar with floating: true, pinned: false, snap: true:

• App bar with floating: true, pinned: true, snap: false:

• App bar with floating: true, pinned: true, snap: true:

• App bar with floating: false, pinned: true, snap: false:

The property snap can only be set to true if floating is also true.

See also:

• CustomScrollView, which integrates the SliverAppBar into its scrolling.
• AppBar, which is a fixed-height app bar for use in Scaffold.appBar.
• TabBar, which is typically placed in the bottom slot of the AppBar if the screen has multiple pages arranged in tabs.
• IconButton, which is used with actions to show buttons on the app bar.
• PopupMenuButton, to show a popup menu on the app bar, via actions.
• FlexibleSpaceBar, which is used with flexibleSpace when the app bar can expand and collapse.
• material.io/design/components/app-bars-top.html