SliverAppBar class Null safety

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.

This is an example that could be included in a CustomScrollView's CustomScrollView.slivers list:
  expandedHeight: 150.0,
  flexibleSpace: const FlexibleSpaceBar(
    title: Text('Available seats'),
  actions: <Widget>[
      icon: const Icon(Icons.add_circle),
      tooltip: 'Add new entry',
      onPressed: () { /* ... */ },

This sample shows a SliverAppBar and it's behaviors when using the pinned, snap and floating parameters.
To create a local project with this code sample, run:
flutter create --sample=material.SliverAppBar.2 mysample

Animated Examples

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

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

See also:



SliverAppBar({Key? key, Widget? leading, bool automaticallyImplyLeading: true, Widget? title, List<Widget>? actions, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, Color? shadowColor, bool forceElevated: false, Color? backgroundColor, Color? foregroundColor, Brightness? brightness, IconThemeData? iconTheme, IconThemeData? actionsIconTheme, TextTheme? textTheme, bool primary: true, bool? centerTitle, bool excludeHeaderSemantics: false, double? titleSpacing, double? collapsedHeight, double? expandedHeight, bool floating: false, bool pinned: false, bool snap: false, bool stretch: false, double stretchTriggerOffset: 100.0, AsyncCallback? onStretchTrigger, ShapeBorder? shape, double toolbarHeight: kToolbarHeight, double? leadingWidth, bool backwardsCompatibility: true, TextStyle? toolbarTextStyle, TextStyle? titleTextStyle, SystemUiOverlayStyle? systemOverlayStyle})
Creates a material design app bar that can be placed in a CustomScrollView. [...]


actions List<Widget>?
A list of Widgets to display in a row after the title widget. [...]
actionsIconTheme IconThemeData?
The color, opacity, and size to use for the icons that appear in the app bar's actions. [...]
automaticallyImplyLeading bool
Controls whether we should try to imply the leading widget if null. [...]
backgroundColor Color?
The fill color to use for an app bar's Material. [...]
backwardsCompatibility bool
If true, preserves the original defaults for the backgroundColor, iconTheme, actionsIconTheme properties, and the original use of the textTheme and brightness properties. [...]
bottom PreferredSizeWidget?
This widget appears across the bottom of the app bar. [...]
brightness Brightness?
This property is obsolete, please use systemOverlayStyle instead. [...]
centerTitle bool?
Whether the title should be centered. [...]
collapsedHeight double?
Defines the height of the app bar when it is collapsed. [...]
elevation double?
The z-coordinate at which to place this app bar relative to its parent. [...]
excludeHeaderSemantics bool
Whether the title should be wrapped with header Semantics. [...]
expandedHeight double?
The size of the app bar when it is fully expanded. [...]
flexibleSpace Widget?
This widget is stacked behind the toolbar and the tab bar. Its height will be the same as the app bar's overall height. [...]
floating bool
Whether the app bar should become visible as soon as the user scrolls towards the app bar. [...]
forceElevated bool
Whether to show the shadow appropriate for the elevation even if the content is not scrolled under the AppBar. [...]
foregroundColor Color?
The default color for Text and Icons within the app bar. [...]
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
iconTheme IconThemeData?
The color, opacity, and size to use for toolbar icons. [...]
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
leading Widget?
A widget to display before the toolbar's title. [...]
leadingWidth double?
Defines the width of leading widget. [...]
onStretchTrigger AsyncCallback?
The callback function to be executed when a user over-scrolls to the offset specified by stretchTriggerOffset.
pinned bool
Whether the app bar should remain visible at the start of the scroll view. [...]
primary bool
Whether this app bar is being displayed at the top of the screen. [...]
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
shadowColor Color?
The of the shadow below the app bar. [...]
shape ShapeBorder?
The shape of the app bar's material's shape as well as its shadow. [...]
snap bool
If snap and floating are true then the floating app bar will "snap" into view. [...]
stretch bool
Whether the app bar should stretch to fill the over-scroll area. [...]
stretchTriggerOffset double
The offset of overscroll required to activate onStretchTrigger. [...]
systemOverlayStyle SystemUiOverlayStyle?
Specifies the style to use for the system overlays that overlap the AppBar. [...]
textTheme TextTheme?
The typographic styles to use for text in the app bar. Typically this is set along with brightness backgroundColor, iconTheme. [...]
title Widget?
The primary widget displayed in the app bar. [...]
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. [...]
titleTextStyle TextStyle?
The default text style for the AppBar's title widget. [...]
toolbarHeight double
Defines the height of the toolbar component of an AppBar. [...]
toolbarTextStyle TextStyle?
The default text style for the AppBar's leading, and actions widgets, but not its title. [...]


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


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited