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.

👁 Flutter AppBar Tutorial

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(),
),

👁 Default AppBar in Flutter

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.

👁 Flutter AppBar Layout

leading

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

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

👁 Flutter AppBar Leading

You can control how much width leading can take:

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

👁 Flutter AppBar Leading Width

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(),
 );
 }
}

👁 Flutter AppBar Navigation Arrow

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(),
 );
 }
}

👁 Flutter AppBar Menu Icon

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'),
),

👁 Flutter AppBar Title

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),
 ),
),

👁 Flutter AppBar Title Image

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!
),

👁 Flutter AppBar Center Title

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),
 ],
),

👁 Flutter AppBar Actions Icon

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],
),

👁 Flutter AppBar Background Color

Icon theme

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

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

👁 Flutter AppBar Icon Theme

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,
 ),
 ),
),

👁 Flutter AppBar Text Theme

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,
),

👁 Flutter AppBar Elevation

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,
),

👁 Flutter AppBar Shadow Color

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,
),

👁 Flutter AppBar Toolbar Height and Opacity

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.

👁 Image