DecoratedAppBar class

A material design app bar.

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 (sometimes called the "overflow menu").

App bars are typically used in the Scaffold.appBar property, which places the app bar as a fixed-height widget at the top of the screen. For a scrollable app bar, see SliverDecoratedAppBar, which embeds an DecoratedAppBar in a sliver for use in a CustomScrollView.

The DecoratedAppBar displays the toolbar widgets, leading, title, and actions, above the bottom (if any). The bottom is usually used for a TabBar. If a flexibleSpace widget is specified then it is stacked behind the toolbar and the bottom widget. The following diagram shows where each of these slots appears in the toolbar when the writing language is left-to-right (e.g. English):

The DecoratedAppBar insets its content based on the ambient MediaQuery's padding, to avoid system UI intrusions. It's taken care of by Scaffold when used in the Scaffold.appBar property. When animating an DecoratedAppBar, unexpected MediaQuery changes (as is common in Hero animations) may cause the content to suddenly jump. Wrap the DecoratedAppBar in a MediaQuery widget, and adjust its padding such that the animation is smooth.

The leading widget is in the top left, the actions are in the top right, the title is between them. The bottom is, naturally, at the bottom, and the flexibleSpace is behind all of them.

If the leading widget is omitted, but the DecoratedAppBar is in a Scaffold with a Drawer, then a button will be inserted to open the drawer. Otherwise, if the nearest Navigator has any previous routes, a BackButton is inserted instead. This behavior can be turned off by setting the automaticallyImplyLeading to false. In that case a null leading widget will result in the middle/title widget stretching to start.

{@tool dartpad --template=stateless_widget_material}

This sample shows an DecoratedAppBar with two simple actions. The first action opens a SnackBar, while the second action navigates to a new page.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: DecoratedAppBar(
      title: const Text('DecoratedAppBar Demo'),
      actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.add_alert),
          tooltip: 'Show Snackbar',
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('This is a snackbar'))
            );
          },
        ),
        IconButton(
          icon: const Icon(Icons.navigate_next),
          tooltip: 'Go to the next page',
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(
              builder: (BuildContext context) {
                return Scaffold(
                  appBar: DecoratedAppBar(
                    title: const Text('Next page'),
                  ),
                  body: const Center(
                    child: Text(
                      'This is the next page',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                );
              },
            ));
          },
        ),
      ],
    ),
    body: const Center(
      child: Text(
        'This is the home page',
        style: TextStyle(fontSize: 24),
      ),
    ),
  );
}

{@end-tool}

See also:

Inheritance
Implemented types

Constructors

DecoratedAppBar({Key? key, Widget? leading, bool automaticallyImplyLeading = true, Widget? title, List<Widget>? actions, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, Color? shadowColor, ShapeBorder? shape, Decoration? decoration, Color? foregroundColor, Brightness? brightness, IconThemeData? iconTheme, IconThemeData? actionsIconTheme, TextTheme? textTheme, bool primary = true, bool? centerTitle, bool excludeHeaderSemantics = false, double? titleSpacing, double toolbarOpacity = 1.0, double bottomOpacity = 1.0, double? toolbarHeight, double? leadingWidth, bool backwardsCompatibility = true, TextStyle? toolbarTextStyle, TextStyle? titleTextStyle, SystemUiOverlayStyle? systemOverlayStyle})
Creates a material design app bar.

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
bottomOpacity → double
How opaque the bottom part of the app bar is.
final
brightness → Brightness?
This property is obsolete, please use systemOverlayStyle instead.
final
centerTitle → bool?
Whether the title should be centered.
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
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
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
preferredSize → Size
A size whose height is the sum of toolbarHeight and the bottom widget's preferred height.
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
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
toolbarOpacity → double
How opaque the toolbar part of the app bar is.
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() → _DecoratedAppBarState
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