A Material Design app bar that integrates with aCustomScrollView.

An app bar consists of a toolbar and potentially other widgets, such as aTabBar and aFlexibleSpaceBar. App bars typically expose one or morecommon actions withIconButtons which are optionally followed by aPopupMenuButton for less common operations.

Sliver app bars are typically used as the first child of aCustomScrollView, which lets the app bar integrate with the scroll view sothat it can vary in height according to the scroll offset or float above theother content in the scroll view. For a fixed-height app bar at the top ofthe screen seeAppBar, which is used in theScaffold.appBar slot.

The AppBar displays the toolbar widgets,leading,title, andactions, above thebottom (if any). If aflexibleSpace widget isspecified 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 configurationsbehave when a user scrolls up and then down again.

• App bar withfloating: false,pinned: false,snap: false:

• App bar withfloating: true,pinned: false,snap: false:

• App bar withfloating: true,pinned: false,snap: true:

• App bar withfloating: true,pinned: true,snap: false:

• App bar withfloating: true,pinned: true,snap: true:

• App bar withfloating: false,pinned: true,snap: false:

The propertysnap can only be set to true iffloating is also true.

See also:

• CustomScrollView, which integrates theSliverAppBar into itsscrolling.
• AppBar, which is a fixed-height app bar for use inScaffold.appBar.
• TabBar, which is typically placed in thebottom slot of theAppBarif the screen has multiple pages arranged in tabs.
• IconButton, which is used withactions to show buttons on the app bar.
• PopupMenuButton, to show a popup menu on the app bar, viaactions.
• FlexibleSpaceBar, which is used withflexibleSpace when the app barcan expand and collapse.
• material.io/design/components/app-bars-top.html

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• SliverAppBar

Constructors

SliverAppBar({Key?key,Widget?leading,boolautomaticallyImplyLeading =true,Widget?title,List<Widget>?actions,boolautomaticallyImplyActions =true,Widget?flexibleSpace,PreferredSizeWidget?bottom,double?elevation,double?scrolledUnderElevation,Color?shadowColor,Color?surfaceTintColor,boolforceElevated =false,Color?backgroundColor,Color?foregroundColor,IconThemeData?iconTheme,IconThemeData?actionsIconTheme,boolprimary =true,bool?centerTitle,boolexcludeHeaderSemantics =false,double?titleSpacing,double?collapsedHeight,double?expandedHeight,boolfloating =false,boolpinned =false,boolsnap =false,boolstretch =false,doublestretchTriggerOffset =100.0,AsyncCallback?onStretchTrigger,ShapeBorder?shape,doubletoolbarHeight =kToolbarHeight,double?leadingWidth,TextStyle?toolbarTextStyle,TextStyle?titleTextStyle,SystemUiOverlayStyle?systemOverlayStyle,boolforceMaterialTransparency =false,booluseDefaultSemanticsOrder =true,Clip?clipBehavior,EdgeInsetsGeometry?actionsPadding})

Creates a Material Design app bar that can be placed in aCustomScrollView.

const

SliverAppBar.large({Key?key,Widget?leading,boolautomaticallyImplyLeading =true,Widget?title,List<Widget>?actions,boolautomaticallyImplyActions =true,Widget?flexibleSpace,PreferredSizeWidget?bottom,double?elevation,double?scrolledUnderElevation,Color?shadowColor,Color?surfaceTintColor,boolforceElevated =false,Color?backgroundColor,Color?foregroundColor,IconThemeData?iconTheme,IconThemeData?actionsIconTheme,boolprimary =true,bool?centerTitle,boolexcludeHeaderSemantics =false,double?titleSpacing,double?collapsedHeight,double?expandedHeight,boolfloating =false,boolpinned =true,boolsnap =false,boolstretch =false,doublestretchTriggerOffset =100.0,AsyncCallback?onStretchTrigger,ShapeBorder?shape,doubletoolbarHeight =_LargeScrollUnderFlexibleConfig.collapsedHeight,double?leadingWidth,TextStyle?toolbarTextStyle,TextStyle?titleTextStyle,SystemUiOverlayStyle?systemOverlayStyle,boolforceMaterialTransparency =false,booluseDefaultSemanticsOrder =true,Clip?clipBehavior,EdgeInsetsGeometry?actionsPadding})

Creates a Material Design large top app bar that can be placedin aCustomScrollView.

const

SliverAppBar.medium({Key?key,Widget?leading,boolautomaticallyImplyLeading =true,Widget?title,List<Widget>?actions,boolautomaticallyImplyActions =true,Widget?flexibleSpace,PreferredSizeWidget?bottom,double?elevation,double?scrolledUnderElevation,Color?shadowColor,Color?surfaceTintColor,boolforceElevated =false,Color?backgroundColor,Color?foregroundColor,IconThemeData?iconTheme,IconThemeData?actionsIconTheme,boolprimary =true,bool?centerTitle,boolexcludeHeaderSemantics =false,double?titleSpacing,double?collapsedHeight,double?expandedHeight,boolfloating =false,boolpinned =true,boolsnap =false,boolstretch =false,doublestretchTriggerOffset =100.0,AsyncCallback?onStretchTrigger,ShapeBorder?shape,doubletoolbarHeight =_MediumScrollUnderFlexibleConfig.collapsedHeight,double?leadingWidth,TextStyle?toolbarTextStyle,TextStyle?titleTextStyle,SystemUiOverlayStyle?systemOverlayStyle,boolforceMaterialTransparency =false,booluseDefaultSemanticsOrder =true,Clip?clipBehavior,EdgeInsetsGeometry?actionsPadding})

Creates a Material Design medium top app bar that can be placedin aCustomScrollView.

const

Properties

actions→List<Widget>?

A list of Widgets to display in a row after thetitle widget.

final

actionsIconTheme→IconThemeData?

The color, opacity, and size to use for the icons that appear in the appbar'sactions.

final

actionsPadding→EdgeInsetsGeometry?

The padding between theactions and the end of the AppBar.

final

automaticallyImplyActions→bool

Controls whether we should try to imply the actions widget if null.

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'sMaterial.

final

bottom→PreferredSizeWidget?

This widget appears across the bottom of the app bar.

final

centerTitle→bool?

Whether the title should be centered.

final

clipBehavior→Clip?

The content will be clipped (or not) according to this option.

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 headerSemantics.

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 willbe the same as the app bar's overall height.

final

floating→bool

Whether the app bar should become visible as soon as the user scrollstowards the app bar.

final

forceElevated→bool

Whether to show the shadow appropriate for theelevation even if thecontent is not scrolled under theAppBar.

final

forceMaterialTransparency→bool

Forces the AppBar's Material widget type to beMaterialType.transparency(instead of Material's default type).

final

foregroundColor→Color?

The default color forText andIcons within the app bar.

final

hashCode→int

The hash code for this object.

no setterinherited

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'stitle.

final

leadingWidth→double?

Defines the width ofAppBar.leading widget.

final

onStretchTrigger→AsyncCallback?

The callback function to be executed when a user over-scrolls to theoffset specified bystretchTriggerOffset.

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.

no setterinherited

scrolledUnderElevation→double?

The elevation that will be used if this app bar has somethingscrolled underneath it.

final

shadowColor→Color?

The color of the shadow below the app bar.

final

shape→ShapeBorder?

The shape of the app bar'sMaterial as well as its shadow.

final

snap→bool

Ifsnap andfloating 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 activateonStretchTrigger.

final

surfaceTintColor→Color?

The color of the surface tint overlay applied to the app bar'sbackground color to indicate elevation.

final

systemOverlayStyle→SystemUiOverlayStyle?

Specifies the style to use for the system overlays (e.g. the status bar onAndroid or iOS, the system navigation bar on Android).

final

title→Widget?

The primary widget displayed in the app bar.

final

titleSpacing→double?

The spacing aroundtitle content on the horizontal axis. This spacing isapplied even if there is noleading content oractions. If you wanttitle to take all the space available, set this value to 0.0.

final

titleTextStyle→TextStyle?

The default text style for the AppBar'stitle widget.

final

toolbarHeight→double

Defines the height of the toolbar component of anAppBar.

final

toolbarTextStyle→TextStyle?

The default text style for the AppBar'sleading, andactions widgets, but not itstitle.

final

useDefaultSemanticsOrder→bool

Whether to use the default semantic ordering for the app bar's children foraccessibility traversal order.

final

Methods

createElement()→StatefulElement

Creates aStatefulElement 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 ofDiagnosticsNode objects describing this node'schildren.

inherited

debugFillProperties(DiagnosticPropertiesBuilderproperties)→ void

Add additional properties associated with the node.

inherited

noSuchMethod(Invocationinvocation)→ dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String?name,DiagnosticsTreeStyle?style})→DiagnosticsNode

Returns a debug representation of the object that is used by debuggingtools and byDiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevelminLevel =DiagnosticLevel.info})→String

A string representation of this object.

inherited

toStringDeep({StringprefixLineOne ='',String?prefixOtherLines,DiagnosticLevelminLevel =DiagnosticLevel.debug,intwrapWidth =65})→String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({Stringjoiner =', ',DiagnosticLevelminLevel =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 ==(Objectother)→bool

The equality operator.

inherited