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:

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: () { /* ... */ },
    ),
  ]
)

This sample shows a SliverAppBar and it's behavior 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.

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.

Constructors

SliverAppBar({Key? key, Widget? leading, bool automaticallyImplyLeading = true, Widget? title, List<Widget>? actions, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, double? scrolledUnderElevation, Color? shadowColor, Color? surfaceTintColor, bool forceElevated = false, Color? backgroundColor, Color? foregroundColor, @Deprecated('This property is no longer used, please use systemOverlayStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.') Brightness? brightness, IconThemeData? iconTheme, IconThemeData? actionsIconTheme, @Deprecated('This property is no longer used, please use toolbarTextStyle and titleTextStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.') 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, @Deprecated('This property is obsolete and is false by default. ' 'This feature was deprecated after v2.4.0-0.0.pre.') bool? backwardsCompatibility, TextStyle? toolbarTextStyle, TextStyle? titleTextStyle, SystemUiOverlayStyle? systemOverlayStyle}): Creates a Material Design app bar that can be placed in a CustomScrollView.
const
SliverAppBar.large({Key? key, Widget? leading, bool automaticallyImplyLeading = true, Widget? title, List<Widget>? actions, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, double? scrolledUnderElevation, Color? shadowColor, Color? surfaceTintColor, bool forceElevated = false, Color? backgroundColor, Color? foregroundColor, IconThemeData? iconTheme, IconThemeData? actionsIconTheme, bool primary = true, bool? centerTitle, bool excludeHeaderSemantics = false, double? titleSpacing, double? collapsedHeight, double? expandedHeight, bool floating = false, bool pinned = true, bool snap = false, bool stretch = false, double stretchTriggerOffset = 100.0, AsyncCallback? onStretchTrigger, ShapeBorder? shape, double toolbarHeight = _LargeScrollUnderFlexibleConfig.collapsedHeight, double? leadingWidth, TextStyle? toolbarTextStyle, TextStyle? titleTextStyle, SystemUiOverlayStyle? systemOverlayStyle}): Creates a Material Design large top app bar that can be placed in a CustomScrollView.
factory
SliverAppBar.medium({Key? key, Widget? leading, bool automaticallyImplyLeading = true, Widget? title, List<Widget>? actions, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, double? scrolledUnderElevation, Color? shadowColor, Color? surfaceTintColor, bool forceElevated = false, Color? backgroundColor, Color? foregroundColor, IconThemeData? iconTheme, IconThemeData? actionsIconTheme, bool primary = true, bool? centerTitle, bool excludeHeaderSemantics = false, double? titleSpacing, double? collapsedHeight, double? expandedHeight, bool floating = false, bool pinned = true, bool snap = false, bool stretch = false, double stretchTriggerOffset = 100.0, AsyncCallback? onStretchTrigger, ShapeBorder? shape, double toolbarHeight = _MediumScrollUnderFlexibleConfig.collapsedHeight, double? leadingWidth, TextStyle? toolbarTextStyle, TextStyle? titleTextStyle, SystemUiOverlayStyle? systemOverlayStyle}): Creates a Material Design medium top app bar that can be placed in a CustomScrollView.
factory

Properties

actions → List<Widget>?: A list of Widgets to display in a row after the title widget.
final
actionsIconTheme → IconThemeData?: The color, opacity, and size to use for the icons that appear in the app bar's actions.
final
automaticallyImplyLeading → bool: Controls whether we should try to imply the leading widget if null.
final
backgroundColor → Color?: The fill color to use for an app bar's Material.
final
backwardsCompatibility → bool?: This property is deprecated and is false by default.
Deprecated('This property is obsolete and is false by default. ' 'This feature was deprecated after v2.4.0-0.0.pre.')">@Deprecated('This property is obsolete and is false by default. ' 'This feature was deprecated after v2.4.0-0.0.pre.')final
bottom → PreferredSizeWidget?: This widget appears across the bottom of the app bar.
final
brightness → Brightness?: This property is deprecated, please use systemOverlayStyle instead.
Deprecated('This property is no longer used, please use systemOverlayStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.')">@Deprecated('This property is no longer used, please use systemOverlayStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.')final
centerTitle → bool?: Whether the title should be centered.
final
collapsedHeight → double?: Defines the height of the app bar when it is collapsed.
final
elevation → double?: The z-coordinate at which to place this app bar relative to its parent.
final
excludeHeaderSemantics → bool: Whether the title should be wrapped with header Semantics.
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 tab bar. Its height will be the same as 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
foregroundColor → Color?: The default color for Text and Icons within the app bar.
final
hashCode → int: The hash code for this object.
nonVirtual">@nonVirtualread-onlyinherited
iconTheme → IconThemeData?: The color, opacity, and size to use for toolbar icons.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
leading → Widget?: A widget to display before the toolbar's title.
final
leadingWidth → double?: Defines the width of leading widget.
final
onStretchTrigger → AsyncCallback?: The callback function to be executed when a user over-scrolls to the offset specified by stretchTriggerOffset.
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
runtimeType → Type: A representation of the runtime type of the object.
read-onlyinherited
scrolledUnderElevation → double?: The elevation that will be used if this app bar has something scrolled underneath it.
final
shadowColor → Color?: The color of the shadow below the app bar.
final
shape → ShapeBorder?: The shape of the app bar's Material as well as its shadow.
final
snap → bool: If snap and floating are true then the floating app bar will "snap" into view.
final
stretch → bool: Whether the app bar should stretch to fill the over-scroll area.
final
stretchTriggerOffset → double: The offset of overscroll required to activate onStretchTrigger.
final
surfaceTintColor → Color?: The color of the surface tint overlay applied to the app bar's background color to indicate elevation.
final
systemOverlayStyle → SystemUiOverlayStyle?: Specifies the style to use for the system overlays that overlap the AppBar.
final
textTheme → TextTheme?: This property is deprecated, please use toolbarTextStyle and titleTextStyle instead.
Deprecated('This property is no longer used, please use toolbarTextStyle and titleTextStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.')">@Deprecated('This property is no longer used, please use toolbarTextStyle and titleTextStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.')final
title → Widget?: The primary widget displayed in the app bar.
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
titleTextStyle → TextStyle?: The default text style for the AppBar's title widget.
final
toolbarHeight → double: Defines the height of the toolbar component of an AppBar.
final
toolbarTextStyle → TextStyle?: The default text style for the AppBar's leading, and actions widgets, but not its title.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SliverAppBar>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
protected">@protectedinherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → 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 DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: 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 ==(Object other) → bool: The equality operator.
nonVirtual">@nonVirtualinherited