Flutter for Beginners: Working with AppBar

This is the 6th part of the Flutter for Beginners tutorial series. In this part, we will discuss how to work with AppBar.

In mobile app development, the AppBar widget is frequently utilized to display the header and navigation of a screen, typically in combination with the Scaffold widget. This article will delve into the typical usage of the AppBar. For practical purposes, let's create a new Flutter project to better comprehend its functionality.

flutter create my_scaffold

Now, we have a new project called my_scaffold.

💡
We will use this new project for several next articles related to the Scaffold widget. Like working with AppBar, BottomSheet, and BottomNavigationBar.

Setting up the Scaffold widget

In order to show an AppBar, we can use a widget called Scaffold. This widget has a specific named parameter where we can provide the AppBar widget.

Inside the main.dart file, a Scaffold widget with an assigned AppBar has already been generated.

Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title),
  ),

......

As you can see, two parameters have already been set - one for the title and one for the background color.

Add actions to the right side.

The Actions are the widgets we put on the right end of an AppBar. They are usually buttons that, when clicked, will act, such as add to cart or share buttons. Here is an example of how to add actions:

AppBar(
  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  title: Text(widget.title),
  actions: [
    IconButton(
      onPressed: () {},
      icon: const Icon(Icons.favorite),
    ),
    IconButton(
      onPressed: () {},
      icon: const Icon(Icons.share),
    )
  ],
)

In the example above, we added two actions: a favorite and share buttons. Here is how it looks:

As you can see, we can add more than one action since we can provide an array of widgets to the actions parameter.

Add leadings to the beginning of AppBar

Just like actions, leading is a widget we put into AppBar, but on the left side. In some cases, it is automatically added as a back button. To demonstrate how it works, see the code below:

AppBar(
  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  title: Text(widget.title),
  actions: [
    IconButton(
      onPressed: () {},
      icon: const Icon(Icons.favorite),
    ),
    IconButton(
      onPressed: () {},
      icon: const Icon(Icons.share),
    )
  ],
  leading: const Icon(Icons.menu),
)

We added an icon widget into the leading. Unlike actions, the leading parameter accepts a widget instead of an array of widgets. Here is how it looks:

Now, we have a menu icon on the left side of the AppBar. We can update the leading width using the leadingWidth parameter. For example:

AppBar(
    ...
    leading: const Icon(Icons.menu),
    leadingWidth: 100,
)

Automatically Implied Leading.

Suppose we design a button that, upon clicking, leads us to a new screen with an AppBar. The AppBar will come equipped with a default back button. Shall we give it a go?

The first thing we need to do is create a new file. Let's call it my_second_screen.dart

import 'package:flutter/material.dart';

class MySecondScreen extends StatelessWidget {
  const MySecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("My Second Screen"),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
    );
  }
}

Next, let's update the plus button to navigate to the second screen instead of incrementing the number. To do that, we can update the onPressed event in FloatingActionButton (main.dart) like this:

floatingActionButton: FloatingActionButton(
	onPressed: () {
		Navigator.of(context).push(
		MaterialPageRoute(builder: (context) => const MySecondScreen()));
	},
	tooltip: 'Increment',
	child: const Icon(Icons.add),
),
main.dart

Now, if we touch the plus button it will navigate us to our new screen.

💡
Don't forget to import the my_second_screen.dart file so that we can call MySecondScreen() from the main.dart.

Here is how the second screen looks:

As you can see, Flutter automatically adds a leading (the back button) that when clicked, will navigate us back to the previous screen. The leading is automatically implied by Flutter.

Updating the automatically implied leading icon.

What if we want to change the leading icon for the back button? for example, we want to use an arrow icon instead of the current icon. Can we use the leading: parameter? Let's give it a try!

 appBar: AppBar(
    title: const Text("My Second Screen"),
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    leading: const Icon(Icons.arrow_back),
 ),
my_second_screen.dart

Here is the result:

As you can see, it works.

Removing the automatically implied leading

In some cases, you probably want to remove the lead completely. To do that, we can simply set the parameter automaticallyImplyLeading to false:

appBar: AppBar(
   title: const Text("My Second Screen"),
   backgroundColor: Theme.of(context).colorScheme.inversePrimary,
   automaticallyImplyLeading: false,
 ),
my_second_screen.dart

Creating AppBar as a Custom Widget.

So far, we have been using the AppBar widget by directly passing it as a parameter. However, it is also possible to create a custom AppBar in a separate class. This approach saves us from having to repeatedly update properties such as background colors and actions.

Let's try that by first creating the class:

import 'package:flutter/material.dart';

class MyCustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyCustomAppBar({super.key});
  
  @override
  Size get preferredSize => const Size.fromHeight(48);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text("My Custom AppBar"),
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    );
  }
}

As you can see, to create a customized AppBar, we can simply create a widget that returns an AppBar widget in the build function. It's important to note that the Scaffold widget accepts PreferredSizeWidget as its appBar parameter, which is why we implemented an abstract class called PreferredSizeWidget in the code above.

After implementing the abstract class, it is required to override a method called preferredSize. It is a getter method that we can use to set the height of the widget. In this case, we set the height to 48 pixels.

  @override
  Size get preferredSize => const Size.fromHeight(48);

Now, we can just set the appBar parameter of the Scaffold like so:

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      appBar: MyCustomAppBar(),
    );
  }

Conclusion

AppBar is one of the commonly used widgets combined with the scaffold. In this article, we already add Actions and Leading to the AppBar. We also create a custom app bar that we can customize. Besides AppBar, there are some other widgets that we can add to the Scaffold widget, like BottomSheet and Drawer. Let's learn about that in the next articles!