An interface bar with a material style.

A toolbar and possibly other widgets, such as a TabBar and a Flexible Spacebar, make up an app bar. With Icon Buttons, app bars usually expose one or more standard acts, which can be accompanied by a Popup Menu Button for less common operations (sometimes called the “overflow menu”).

App bars are commonly used for the Scaffold.appBar property, which positions the app bar at the top of the screen as a fixed-height widget. See SliverAppBar for a scrollable app bar that embeds an AppBar in a sliver for use in a CustomScrollView.

Above the bottom, the AppBar shows the toolbar widgets, leading, title, and acts (if any). Typically, the bottom is used for a

a TabBar is a tool for switching between tabs. A flexibleSpace widget is stacked behind the toolbar and the bottom widget if one is mentioned. When writing in a left-to-right language (such as English), the following diagram illustrates where each of these slots appears in the toolbar:

To prevent device UI intrusions, the AppBar insets its content based on the padding of the ambient MediaQuery. Scaffold takes care of it when the Scaffold.appBar property is used. Unexpected MediaQuery changes (as seen in Hero animations) may cause the content to leap while animating an AppBar. Wrap the AppBar in a MediaQuery widget and change the padding to ensure a smooth animation.

Tagged in: