Flutter: AppBar Widget and Customization

AppBar is a widget located at the top of the page that comes by default with every Scaffold. It can contain a title, navigation buttons, and action buttons.

Live Demo

You can try this widget in the interactive example below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Basic Usage

Scaffold(
  appBar: AppBar(
    title: Text('Page Title'),
  ),
  body: Center(child: Text('Content')),
)

Important Properties

Property	Description
title	Title widget
leading	Widget on the left (usually back button)
actions	List of buttons on the right
backgroundColor	Background color
foregroundColor	Icon and text color
elevation	Shadow amount
centerTitle	Center the title
automaticallyImplyLeading	Automatic back button

Using Actions

AppBar(
  title: Text('Title'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

Customizing Leading

AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // Open drawer
    },
  ),
  title: Text('Title'),
)

Search Bar Integration

AppBar(
  title: TextField(
    decoration: InputDecoration(
      hintText: 'Search...',
      border: InputBorder.none,
      prefixIcon: Icon(Icons.search),
    ),
  ),
)

Gradient AppBar

AppBar(
  title: Text('Gradient'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.purple, Colors.blue],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
)

SliverAppBar

AppBar that shrinks/expands with scrolling:

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Title'),
        background: Image.network(
          'https://example.com/image.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 50,
      ),
    ),
  ],
)

Summary

• AppBar: Page top bar
• title: Title widget
• leading: Left side (back button, menu)
• actions: Right side buttons
• SliverAppBar: Scrollable AppBar

AppBar is a fundamental component for managing your app's navigation.