SliverNewGradientAppBar 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 NewGradientAppBar, which is used in the Scaffold.appBar slot.

The GradientAppBar 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 sample}

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

SliverGradientAppBar(
  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.

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

See also:

• CustomScrollView, which integrates the SliverNewGradientAppBar into its scrolling.
• NewGradientAppBar, which is a fixed-height app bar for use in Scaffold.appBar.
• TabBar, which is typically placed in the bottom slot of the NewGradientAppBar 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
• SliverNewGradientAppBar

Constructors

SliverNewGradientAppBar({Key? key, Widget? leading, bool automaticallyImplyLeading = true, Widget? title, List<Widget>? actions, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, bool forceElevated = false, Gradient? gradient, Brightness? brightness, IconThemeData? iconTheme, IconThemeData? actionsIconTheme, TextTheme? textTheme, bool primary = true, bool? centerTitle, double titleSpacing = NavigationToolbar.kMiddleSpacing, double? expandedHeight, bool floating = false, bool pinned = false, bool snap = false, ShapeBorder? shape})

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

actionsIconTheme → IconThemeData?

The color, opacity, and size to use for trailing app bar icons. This should only be used when the trailing icons should be themed differently than the leading icons.

final

automaticallyImplyLeading → bool

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

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 tab bar. It's 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 NewGradientAppBar.

final

gradient → Gradient?

The gradient displayed at the appbar.

final

hashCode → int

The hash code for this object.

no setter, inherited

iconTheme → IconThemeData?

The color, opacity, and size to use for app bar icons. Typically this is set along with backgroundColor, brightness, textTheme.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

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

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

shape → ShapeBorder?

The material's shape as well its shadow.

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

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → _SliverNewGradientAppBarState

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