flutter
/

Flutter AppBar Widget Tutorial for Beginners

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

Flutter AppBar Widget Tutorial for Beginners

What is AppBar in Flutter?

AppBar is a Material Design widget that represents the top app bar, typically placed at the top of a screen. It usually contains a leading icon (like a menu or back button), a title, and optional action buttons. AppBar is most commonly used as the appBar property of a Scaffold.

Basic Usage

The simplest AppBar just has a title. Place it inside a Scaffold:

DARTRead-only
1
Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(child: Text('Hello World')),
)

Key Properties

AppBar offers many properties to customize its appearance and behavior:

  • leading: A widget displayed before the title. Typically an IconButton (like menu or back). If not set, the AppBar automatically shows a back button when the previous route is known.
  • title: The primary widget (usually a Text). It's centered by default, but you can put any widget here.
  • actions: A list of widgets (usually IconButtons) displayed after the title.
  • flexibleSpace: A widget that sits behind the app bar content and can be animated (e.g., for collapsible effects).
  • bottom: A widget at the bottom of the app bar, often a TabBar.
  • elevation: The z-coordinate at which to place this app bar (shadow depth).
  • backgroundColor: The color of the app bar.
  • iconTheme: Color and opacity of icons in the leading and actions.
  • textTheme: Text style for the title.
  • centerTitle: Whether the title should be centered (default varies by platform).
  • automaticallyImplyLeading: If true (and leading is null), automatically add a back button when the route can be popped.
  • shape: Defines the app bar's shape (e.g., rounded rectangle).
  • shadowColor: Color of the shadow below the app bar.

Adding Actions

Use the actions property to add icons or buttons on the right side:

DARTRead-only
1
AppBar(
  title: Text('Actions Demo'),
  actions: [
    IconButton(onPressed: () {}, icon: Icon(Icons.search)),
    IconButton(onPressed: () {}, icon: Icon(Icons.shopping_cart)),
    PopupMenuButton(
      itemBuilder: (context) => [
        PopupMenuItem(child: Text('Settings')),
        PopupMenuItem(child: Text('Help')),
      ],
    ),
  ],
)

Using leading

You can replace the default back button with a custom leading icon:

DARTRead-only
1
AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () => Scaffold.of(context).openDrawer(),
  ),
  title: Text('Custom Leading'),
)

AppBar with Tabs (bottom)

Combine AppBar with a TabBar to create a tabbed interface:

DARTRead-only
1
DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Tabs Demo'),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Icon(Icons.directions_car),
        Icon(Icons.directions_transit),
        Icon(Icons.directions_bike),
      ],
    ),
  ),
)

Customizing Appearance

You can change colors, elevation, and shape to match your design:

DARTRead-only
1
AppBar(
  title: Text('Styled AppBar'),
  backgroundColor: Colors.teal,
  elevation: 4.0,
  shadowColor: Colors.black45,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(bottom: Radius.circular(16)),
  ),
  centerTitle: true,
)

FlexibleSpace and SliverAppBar

For more advanced scrolling effects (like collapsible headers), use SliverAppBar inside a CustomScrollView. The flexibleSpace property allows you to place a background that animates as the user scrolls.

Common Mistakes Beginners Make

  • Using AppBar without Scaffold: AppBar is designed to be placed inside a Scaffold's appBar property. Using it elsewhere can lead to layout issues.
  • Forgetting to handle back navigation: When you provide a custom leading, you lose the automatic back button; you must handle navigation yourself.
  • Overcrowding actions: Too many actions can overflow. Use a PopupMenuButton for overflow items.
  • Not setting centerTitle properly: On iOS, the title is centered by default; on Android, it's left-aligned. Use centerTitle to enforce your preference.
  • Misunderstanding automaticallyImplyLeading: This only adds a back button if the route can be popped. If you want a menu button, you must provide your own leading.
  • Forgetting to wrap TabBar with a DefaultTabController: Tabs need a controller to sync the TabBar with the TabBarView.

Key Points to Remember

  • AppBar is typically used inside Scaffold's appBar property.
  • It has three main areas: leading, title, and actions.
  • Use bottom to add a TabBar.
  • Customize colors with backgroundColor, iconTheme, textTheme.
  • Control the back button with automaticallyImplyLeading and custom leading.
  • For complex scroll effects, consider SliverAppBar.

Common Interview Questions

  1. What is the purpose of the AppBar widget?
  2. How do you add icons to the right side of an AppBar?
  3. Explain the difference between leading and automaticallyImplyLeading.
  4. How would you create an AppBar with a search field instead of a title?
  5. What is flexibleSpace and when would you use it?
  6. How do you add tabs below the AppBar? What controller is needed?

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar Demo'),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
          IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
        ],
      ),
      body: Center(
        child: Text('Hello, AppBar!'),
      ),
    );
  }
}

Test Your Knowledge

Q1
of 3

What is the default behavior of `automaticallyImplyLeading` when `leading` is not provided?

A
It always shows a menu icon
B
It shows a back button if the route can be popped
C
It shows nothing
D
It shows a close button
Q2
of 3

How do you add a TabBar to an AppBar?

A
Using the `tabs` property
B
Using the `bottom` property and providing a TabBar
C
Using the `actions` property
D
Using a separate widget below the AppBar
Q3
of 3

Which property of AppBar is used to set the widget that appears before the title?

A
leading
B
start
C
left
D
preTitle

Previous

flutter scaffold

Next

flutter futurebuilder

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.