Appbar

A material design app bar.

Overview

The AppBar control provides a top bar for applications, adhering to Material Design principles. It can host a leading widget, a title, and a series of action widgets.

Properties

**actions**: list[Control] | None - A list of controls to display after the title. Typically IconButtons or a PopupMenuButton.

**actions_padding**: PaddingValue | None - Padding between actions and the end of the app bar.

**automatically_imply_leading**: bool - If True, automatically determines a leading control when leading is None.

**bgcolor**: ColorValue | None - The fill color of the app bar. Defaults to AppBarTheme.bgcolor.

**center_title**: bool | None - Whether to center the title. Defaults to AppBarTheme.center_title.

**clip_behavior**: ClipBehavior | None - Defines how the content is clipped.

**color**: ColorValue | None - Default color for Text and Icon controls within the app bar. Defaults to AppBarTheme.color.

**elevation**: Number | None - The app bar's elevation (shadow depth). Only visible in Material 2.

**elevation_on_scroll**: Number | None - Elevation when content is scrolled underneath.

**exclude_header_semantics**: bool - Whether to wrap the title with header Semantics.

**force_material_transparency**: bool - Forces the app bar to be transparent, removing default Material styling.

**leading**: Control | None - A control to display before the title, typically an Icon or IconButton.

**leading_width**: Number | None - The width of the leading control.

**secondary**: bool - Indicates if the app bar is not at the top of the screen.

**shadow_color**: ColorValue | None - The color of the shadow below the app bar.

**shape**: OutlinedBorder | None - The shape of the app bar and its shadow.

**title**: StrOrControl | None - The primary control displayed in the app bar, usually a Text control.

**title_spacing**: Number | None - Spacing around the title on the horizontal axis.

**title_text_style**: TextStyle | None - The text style for Text controls in the title.

**toolbar_height**: Number | None - The height of the toolbar component.

**toolbar_opacity**: Number - The opacity of the toolbar (0.0 to 1.0).

**toolbar_text_style**: TextStyle | None - The text style for Text controls in the leading and actions.

Inheritance

Inherits from AdaptiveControl.

Examples

**Basic AppBar**: Demonstrates a simple app bar with a leading icon, title, and action buttons.

**Actions and Popup Menu**: Shows how to include IconButtons and a PopupMenuButton in the actions.

**Theme and Material Mode Toggles**: Illustrates dynamic theme and Material version switching affecting the app bar.

Previous arrow_back Animatedswitcher

Next Autocomplete arrow_forward