AppBar — what it is, configuration and Flutter widgets

What is AppBar in Flutter

AppBar is a standard Material top panel component that appears at the top of a Scaffold. It contains the screen title, a navigation button (usually a “hamburger” icon or “Back” arrow) and actions — icons that open search, settings or other functions. AppBar automatically adapts to the platform: on Android it uses the standard Material bottom-shadow, on iOS — a flatter design with transparency.

AppBar implements the PreferredSizeWidget interface, which means its height is fixed and known before building. By default, AppBar height is 56dp on Android and 44dp on iOS in portrait orientation, taking SafeArea into account at the top. This feature allows Scaffold to calculate available space for body in advance, avoiding recomposition during rendering.

According to Flutter Material Library Guide (2026), AppBar has gone through several iterations: in Flutter 1.x it was a simple container with text, in Flutter 2.x it gained support for Material 3 and flexibleSpace, and in Flutter 3.x — integration with System UI (status bar color, transparency). The modern AppBar supports Dynamic Color from Material You on Android 12+ devices.

AppBar Structure: Properties and Parameters

AppBar provides a set of parameters that control each part of the top panel. Understanding these properties allows flexible customization of the panel for any design requirements without creating custom solutions.

Title and leading: configuring title and navigation

The title property accepts any widget, but Text with style configuration via TextStyle is most commonly used. For long titles, it is recommended to wrap the title in Flexible so that the text truncates correctly when space is limited. The leading property is automatically replaced with BackButton when navigating to a nested screen via Navigator.push, if not set explicitly.

Actions: placing action icons

The actions list contains widgets aligned to the right edge of AppBar. Each element should be no wider than 48dp (Material Design standard). To group actions, use PopupMenuButton — this hides less important options in a dropdown menu and complies with Material recommendations for interface density.

AppBar Customization: Styles, Colors and Behavior

AppBar supports deep customization through color, shadow and padding properties. The basic styling is inherited from the app theme, but each property can be overridden individually. Let’s look at the main configuration scenarios.

The background color of AppBar is set via backgroundColor. If not specified, appBarTheme from ThemeData is used. In Material 3, AppBar color is automatically calculated from ColorScheme.primary, but it can be overridden for a specific screen. For a transparent AppBar (often used in profiles), set backgroundColor: Colors.transparent with elevation: 0.

The elevation property controls the shadow under AppBar. A value of 0 removes the shadow, creating a “flat” panel effect, which is relevant for Material 3. A value of 4 gives the standard Material Design shadow. For custom shadow control, use shadowColor — the shadow color that visually separates the panel from the content.

To control text color in AppBar, use foregroundColor. This property affects the color of the title, icons and text in actions. When backgroundColor changes, a contrasting foregroundColor is automatically selected, but it can be forced for non-standard designs.

SliverAppBar: An Animated Version of AppBar

SliverAppBar is an extension of AppBar for use inside CustomScrollView that supports scroll animation: collapsing, parallax effect and pinned mode. Unlike a standard AppBar, SliverAppBar is a sliver widget and can dynamically change size depending on the scroll position.

The main SliverAppBar modes are determined by a combination of pinned, floating and snap properties. In pinned mode, the panel always remains visible at the top of the screen. In floating mode, it appears when scrolling back. The floating + snap combination creates a “sticky” panel behavior that appears at the slightest upward scroll, often used in news feeds.

According to Flutter API SliverAppBar (2026), to use SliverAppBar you need to replace a regular ListView or Column with CustomScrollView containing sliver widgets. Scaffold continues to work correctly, but the appBar property of Scaffold must be null — SliverAppBar is placed inside CustomScrollView as the first sliver.

AppBar Configuration Example in an Application

Let’s look at an AppBar example with search, dropdown menu and TabBar. This code demonstrates a typical top panel configuration in a production Flutter application.

Scaffold(
  appBar: AppBar(
    title: const Text('Catalog'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Settings')),
          const PopupMenuItem(value: 'about', child: Text('About App')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

In the example, AppBar contains a centered title, a Drawer open button on the left, a search icon and a dropdown menu on the right. TabBar in the bottom allows switching between product categories. This configuration covers most mobile app scenarios: navigation, search, additional options and section switching — all in one top panel.