Customizing the AppBar in Flutter: An overview with examples

The app bar is one of the most-used components in all kinds of applications. It can be used to house a search field, buttons to navigate between pages, or simply the title of the page. Since it’s such a commonly used component, Flutter provides a dedicated widget for this functionality called AppBar.

In this tutorial, we’ll show you how to customize the AppBar in a Flutter app by walking through some practical examples.

Here’s what we’ll cover:

• What is the AppBar in Flutter?
• AppBar layout
• Customizing the AppBar

What is the AppBar in Flutter?

Flutter AppBar is an app component built in accordance with Material Design guidelines. It’s usually placed at the top of the screen and has the ability to contain other widgets within its layout. The AppBar commonly displays branding information such as logos and titles and often contains buttons or other points of user interaction.

Here’s what the default AppBar looks like in Flutter:

// Mostly, AppBar is used inside a Scaffold widget.
Scaffold(
  appBar: AppBar(),
),

Pretty blank, right? Let’s go ahead and customize it to our liking.

AppBar layout

In Flutter, the AppBar’s layout mainly comprises three components: leading, title, and actions. leading is placed at the leftmost position of the AppBar; title and actions appear to its right.

leading

leading takes in a widget and can be assigned anything — text, an icon, or even multiple widgets within a row.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

AppBar(
  leading: Icon(Icons.account_circle_rounded),
),

You can control how much width leading can take:

AppBar(
  leading: Icon(Icons.account_circle_rounded),
  leadingWidth: 100, // default is 56
),

If leading is not provided, AppBar implies it for us automatically. Examples include a navigation arrow to go back to the previous page or a menu icon to open the drawer.

The navigation arrow appears automatically when a previous route is available.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('Push'),
          onPressed: () => Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return SecondPage();
            },
          )),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

When we add a Drawer to the Scaffold, a menu icon is assigned to leading to open the drawer.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(),
    );
  }
}

If desired, this behavior can be prevented by making automaticallyImplyLeading false.

AppBar(
  automaticallyImplyLeading: false, // simple as that!
),

title

As the name suggests, it’s mostly used for showing titles, such as the app title or a page header.

AppBar(
  title: Text('Profile Page'),
),

But you’re not limited to that since title takes a widget as well. You can use it to show icons, images, shapes, or any combination of these using layout widgets such as row and column.

Here’s an example:

AppBar(
  title: Container(
    width: 40,
    child: Image.network(url),
  ),
),

By default, title is aligned to the left of AppBar, per Material guidelines. You can change this to align it in the center:

AppBar(
  title: Container(
    width: 40,
    child: Image.network(url),
  ),
  centerTitle: true, // like this!
),

actions

actions is a list of widgets that are aligned to the right of AppBar. We usually see them in apps used as buttons to trigger dropdown menus, profile avatars, etc.

AppBar(
  actions: [
    Icon(Icons.more_vert),
  ],
),

Let’s add one more widget to the list:

AppBar(
  actions: [
    Container(
      width: 30,
      child: Image.asset(
        'assets/images/profile_pic.png', 
      ),
    ),
    Icon(Icons.more_vert),
  ],
),

Customizing the AppBar in Flutter

Now that we’re familiar with AppBar’s layout, let’s take the customization to the next level by playing with theming options. AppBar contains all sorts of properties, including colors, sizes, icon themes, text themes, and more.

Background color

The following code changes the background color of AppBar to deep orange. 500 is added to access a particular shade of the color, 900 being the darkest and 50 being the lightest.

AppBar(
  backgroundColor: Colors.deepOrange[500],
),

Icon theme

The code below changes the icon’s color to green and size to 36:

AppBar(
  actionsIconTheme: IconThemeData(color: Colors.green, size: 36),
),

Text theme

Let’s say you want to change the text color to amber with a lighter shade of 200 and set the font size to 24:

AppBar(
  textTheme: TextTheme(
    headline6: TextStyle( // headline6 is used for setting title's theme
      color: Colors.amber[200],
      fontSize: 24,
    ),
  ),
),

Elevation

If you want to give the AppBar a little boost, you can use elevation. The following code increases the elevation of AppBar to 15.

AppBar(
  elevation: 15,
),

Notice that AppBar is lifted up and the shadow spans a larger area.

Shadow color

You can even mess around with the color of the drop shadow. The code below changes AppBar’s shadow color to orangeAccent.

AppBar(
  shadowColor: Colors.orangeAccent,
),

Pretty cool, right?

Toolbar height and opacity

Finally, we have the toolbar properties. The toolbar comprises text, icons, buttons, and anything else that’s in the foreground, except for widgets such as Container and Image.

To change the height and opacity of AppBar’s toolbar items:

AppBar(
  toolbarHeight: 100, // default is 56
  toolbarOpacity: 0.5,
),

Conclusion

If you’ve made it this far, you should now understand:

• What the AppBar is and how it’s used in Flutter
• AppBar’s layout (leading, title, and actions)
• How to customize AppBar’s layout and add widgets
• How to theme AppBar’s icons, text, background, elevation, shadow color, and toolbar

So here we have it! A complete walkthrough on everything Flutter’s AppBar has to offer. I hope this article helps you create beautiful AppBars in all your future Flutter apps.

LogRocket: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free.