SliverDecoratedAppBar 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 DecoratedAppBar, which is used in the Scaffold.appBar slot.
The DecoratedAppBar 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.
{@tool snippet}
This is an example that could be included in a CustomScrollView's CustomScrollView.slivers list:
SliverDecoratedAppBar(
expandedHeight: 150.0,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () { /* ... */ },
),
]
)
{@end-tool}
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:
- CustomScrollView, which integrates the SliverDecoratedAppBar into its scrolling.
- DecoratedAppBar, which is a fixed-height app bar for use in Scaffold.appBar.
- TabBar, which is typically placed in the bottom slot of the DecoratedAppBar 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
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- SliverDecoratedAppBar
Constructors
-
SliverDecoratedAppBar({Key? key, Widget? leading, bool automaticallyImplyLeading = true, Widget? title, List<
Widget> ? actions, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, Color? shadowColor, bool forceElevated = false, Decoration? decoration, 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.
const
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
- backwardsCompatibility → bool
-
If true, preserves the original defaults for the
backgroundColor
, iconTheme, actionsIconTheme properties, and the original use of the textTheme and brightness properties.final - bottom → PreferredSizeWidget?
-
This widget appears across the bottom of the app bar.
final
- brightness → Brightness?
-
This property is obsolete, please use systemOverlayStyle instead.
final
- centerTitle → bool?
-
Whether the title should be centered.
final
- collapsedHeight → double?
-
Defines the height of the app bar when it is collapsed.
final
- decoration → Decoration?
-
The fill color to use for an app bar's Material.
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 DecoratedAppBar.
final
- foregroundColor → Color?
-
The default color for Text and Icons 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's title.
final
- leadingWidth → double?
-
Defines the width of AppBar.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.
no setterinherited
- 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
- systemOverlayStyle → SystemUiOverlayStyle?
-
Specifies the style to use for the system overlays (e.g. the status bar on
Android or iOS, the system navigation bar on Android).
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 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(
) → _SliverDecoratedAppBarState -
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.inherited -
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → 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 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.
inherited