AppBar 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 SliverAppBar, which embeds an AppBar in a sliver for use in a CustomScrollView.

The AppBar 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 AppBar 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 AppBar, unexpected MediaQuery changes (as is common in Hero animations) may cause the content to suddenly jump. Wrap the AppBar 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 AppBar 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.

This sample shows an AppBar with two simple actions. The first action opens a SnackBar, while the second action navigates to a new page.
To create a local project with this code sample, run:
flutter create --sample=material.AppBar.1 mysample

See also:

Implemented types


AppBar({Key key, Widget leading, bool automaticallyImplyLeading: true, Widget title, List<Widget> actions, Widget flexibleSpace, PreferredSizeWidget bottom, double elevation, Color shadowColor, ShapeBorder shape, Color backgroundColor, Brightness brightness, IconThemeData iconTheme, IconThemeData actionsIconTheme, TextTheme textTheme, bool primary: true, bool centerTitle, bool excludeHeaderSemantics: false, double titleSpacing: NavigationToolbar.kMiddleSpacing, double toolbarOpacity: 1.0, double bottomOpacity: 1.0, double toolbarHeight, double leadingWidth})
Creates a material design app bar. [...]


actions List<Widget>
Widgets to display in a row after the title widget. [...]
actionsIconTheme IconThemeData
The color, opacity, and size to use for the icons that appear in the app bar's actions. This should only be used when the actions should be themed differently than the icon that appears in the app bar's leading widget. [...]
automaticallyImplyLeading bool
Controls whether we should try to imply the leading widget if null. [...]
backgroundColor Color
The color to use for the app bar's material. Typically this should be set along with brightness, iconTheme, textTheme. [...]
bottom PreferredSizeWidget
This widget appears across the bottom of the app bar. [...]
bottomOpacity double
How opaque the bottom part of the app bar is. [...]
brightness Brightness
The brightness of the app bar's material. Typically this is set along with backgroundColor, iconTheme, textTheme. [...]
centerTitle bool
Whether the title should be centered. [...]
elevation double
The z-coordinate at which to place this app bar relative to its parent. [...]
excludeHeaderSemantics bool
Whether the title should be wrapped with header Semantics. [...]
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. [...]
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
iconTheme IconThemeData
The color, opacity, and size to use for app bar icons. Typically this is set along with backgroundColor, brightness, textTheme. [...]
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
leading Widget
A widget to display before the title. [...]
leadingWidth double
Defines the width of leading widget. [...]
preferredSize Size
A size whose height is the sum of toolbarHeight and the bottom widget's preferred height. [...]
primary bool
Whether this app bar is being displayed at the top of the screen. [...]
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
shadowColor Color
The color to paint the shadow below the app bar. [...]
shape ShapeBorder
The material's shape as well its shadow. [...]
textTheme TextTheme
The typographic styles to use for text in the app bar. Typically this is set along with brightness backgroundColor, iconTheme. [...]
title Widget
The primary widget displayed in the app bar. [...]
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. [...]
toolbarHeight double
Defines the height of the toolbar component of an AppBar. [...]
toolbarOpacity double
How opaque the toolbar part of the app bar is. [...]


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
createState() → _AppBarState
Creates the mutable state for this widget at a given location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel:}) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited