AppBar in Flutter

What is an AppBar in Flutter?

An AppBar is a Material Design widget that implements the top application bar according to platform conventions. It is most commonly used as the appBar property of a Scaffold.

It supports:

• titles and subtitles
• leading navigation widgets
• action buttons
• bottom widgets (e.g. TabBar)
• scroll-aware behavior when combined with Slivers

How AppBar works with Scaffold

AppBar is tightly integrated with Scaffold. When assigned to the Scaffold's appBar property, it automatically:

• Positions itself below the system status bar.
• Adjusts height based on platform and text scaling.
• Participates in Material behaviors like elevation and scrolling.

Using AppBar outside of Scaffold is possible and useful when you're building your own layout.

AppBar example in Flutter

Scaffold(
  appBar: AppBar(
    title: const Text('Profile'),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
  body: const Center(
    child: Text('Content'),
  ),
);

This is the most common and recommended usage pattern.

Common mistakes when using AppBar

A few issues frequently confuse beginners:

• Manually adding a back button: Flutter automatically displays a back button in the AppBar when navigating to a new screen using Navigator. In most cases, defining the leading widget manually is unnecessary.
• Thinking AppBar color changes are a bug: When using Material 3, the AppBar may slightly change its background color as content scrolls underneath it. This is expected behavior and part of the Material design system.
• Overloading the AppBar with actions: Placing too many icons in the AppBar reduces clarity and usability. Actions should be limited to the most important operations.

For advanced layouts, widgets like SliverAppBar is usually a better fit.