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.

Sample code

This is an example that could be included in a CustomScrollView's CustomScrollView.slivers list:

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

See also:

Inheritance

Constructors

SliverAppBar({Key key, Widget leading, bool automaticallyImplyLeading: true, Widget title, List<Widget> actions, Widget flexibleSpace, PreferredSizeWidget bottom, double elevation, bool forceElevated: false, Color backgroundColor, Brightness brightness, IconThemeData iconTheme, TextTheme textTheme, bool primary: true, bool centerTitle, double titleSpacing: NavigationToolbar.kMiddleSpacing, double expandedHeight, bool floating: false, bool pinned: false, bool snap: false })
Creates a material design app bar that can be placed in a CustomScrollView. [...]
const

Properties

actions List<Widget>
Widgets to display after the title widget. [...]
final
automaticallyImplyLeading bool
Controls whether we should try to imply the leading widget if null. [...]
final
backgroundColor Color
The color to use for the app bar's material. Typically this should be set along with brightness, iconTheme, textTheme. [...]
final
bottom PreferredSizeWidget
This widget appears across the bottom of the appbar. [...]
final
brightness Brightness
The brightness of the app bar's material. Typically this is set along with backgroundColor, iconTheme, textTheme. [...]
final
centerTitle bool
Whether the title should be centered. [...]
final
elevation double
The z-coordinate at which to place this app bar when it is above other content. This controls the size of the shadow below the app bar. [...]
final
expandedHeight double
The size of the app bar when it is fully expanded. [...]
final
flexibleSpace Widget
This widget is stacked behind the toolbar and the tabbar. It's height will be the same as the the app bar's overall height. [...]
final
floating bool
Whether the app bar should become visible as soon as the user scrolls towards the app bar. [...]
final
forceElevated bool
Whether to show the shadow appropriate for the elevation even if the content is not scrolled under the AppBar. [...]
final
iconTheme IconThemeData
The color, opacity, and size to use for app bar icons. Typically this is set along with backgroundColor, brightness, textTheme. [...]
final
leading Widget
A widget to display before the title. [...]
final
pinned bool
Whether the app bar should remain visible at the start of the scroll view. [...]
final
primary bool
Whether this app bar is being displayed at the top of the screen. [...]
final
snap bool
If snap and floating are true then the floating app bar will "snap" into view. [...]
final
textTheme TextTheme
The typographic styles to use for text in the app bar. Typically this is set along with brightness backgroundColor, iconTheme. [...]
final
title Widget
The primary widget displayed in the appbar. [...]
final
titleSpacing double
The spacing around title content on the horizontal axis. This spacing is applied even if there is no leading content or actions. If you want title to take all the space available, set this value to 0.0. [...]
final
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited

Methods

createState() → _SliverAppBarState
Creates the mutable state for this widget at a given location in the tree. [...]
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder description) → void
Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

operator ==(other) bool
The equality operator. [...]
inherited