Playing with AppBar in Flutter

flutterFlutter Appbar

Hello flutter geeks this is the series of Flutter where I will write blogs on Flutter development. So, basically I publish articles on regularly. So let’s start with this article that is Playing with Appbar in flutter. This is my first blog on flutter this article is the part of Today I Learnt category.

Let’s start

Here is the video tutorial

Introduction to Appbar

As you know that every component in flutter is a widget so Appbar is also a widget that contains the toolbar in flutter application. In Android we use different toolbar like android default toolbar, material toolbar and many more but in flutter there is a widget appbar that auto fixed toolbar at the top of the screen.

In Appbar we create different toolbar widgets like menu button, actions, icon buttons and many more. So, In this article we’ll covered some basic functionality of Appbar.

1) Play with back button.

When we created app bar, It shows back button by default enable Like this.

AppBar(
  title: Text("Hello Appbar"),
)

Here is the output

If you want to remove this then add this property in your AppBar widget

automaticallyImplyLeading: false

2) Create menu/leading button.

Flutter allow you to create menu or leading button in Appbar. Usually we create menu button manually in android but in flutter we create menu or leading button using a single Appbar properties. Just add below code in your Appbar widget to create customize leading button. It is located on the left side of the Appbar.

AppBar(
  title: Text("Hello Appbar"),
  leading: Icon(
    Icons.menu,
  ),
);

If you want add click listener on menu button add below code.

AppBar(
  title: Text("Hello Appbar"),
  leading: GestureDetector(
    onTap: () { /* Write listener code here */ },
    child: Icon(
      Icons.menu,  // add custom icons also
    ),
  ),
)

Here is the output.

3) Working with Appbar actions.

In flutter the actions are the widgets that perform the actions in Appbar like settings, more, etc. So, For creating the actions in Appbar add actions property in Appbar widget. Here is the code for actions.

AppBar(
  title: Text("Hello Appbar"),
  leading: GestureDetector(
      onTap: () { /* Write listener code here */ },
      child: Icon(
        Icons.menu,  // add custom icons also
      ),
  ),
  actions: <Widget>[
    Padding(
      padding: EdgeInsets.only(right: 20.0),
      child: GestureDetector(
        onTap: () {},
        child: Icon(
          Icons.search,
          size: 26.0,
        ),
      )
    ),
    Padding(
      padding: EdgeInsets.only(right: 20.0),
      child: GestureDetector(
        onTap: () {},
        child: Icon(
            Icons.more_vert
        ),
      )
    ),
  ],
),

Here is the output of actions.

4) Appbar actions icons theme.

Flutter provide a simple method to manage and customize actions icons theme. Just add actionIconTheme property in Appbar widget to change the color, opacity and size. Here is the code.

AppBar(
  actionsIconTheme: IconThemeData(
    size: 30.0,
    color: Colors.black,
    opacity: 10.0
  ),
),

Here is the output.

Cheers 🍷

For complete code click here.

Thanks for reading if you want any help then follow me on Website, Github, Twitter,