Flutter Appbar: Customize Your App Bar

App bar is one of the most important parts of any application. It provides a quick way of navigating to different sections of the app. Flutter provides a flexible and customizable app bar widget to create beautiful and responsive UIs.

Basic Appbar

To create a basic app bar, you can use the AppBar widget which is provided by Flutter. By default, the AppBar shows a title and an icon on the left side of the title which can be used for navigation.

Here is the code to create a basic app bar.

AppBar(
  title: Text('Flutter App'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
);}

In the above code, title is a required parameter and sets the title of the app bar. leading is an optional parameter and sets the leading icon for the app bar. In the above code, IconButton is used to display the leading icon. onPressed is a callback function which is called when the leading icon is pressed.

Customizing Appbar with Actions

To add more functionality to the app bar, we can add actions to the app bar. Actions are widgets that are displayed on the right side of the title.

AppBar(
  title: Text('Flutter App'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
);}

In the above code, we have added two actions to the app bar: a search icon and a more_vert icon. Both of these icons are wrapped inside IconButton widgets. When the user clicks on these icons, onPressed callback functions are called.

Customizing Appbar with Bottom

Sometimes, we might need to add some widgets below the app bar. We can do that by specifying a bottom property in the AppBar widget. The bottom property takes a PreferredSize widget and we can use any widget as its child.

AppBar(
  title: Text("Flutter App"),
  bottom: PreferredSize(
    child: Container(
      color: Colors.green,
      height: 50.0,
      child: Center(
        child: Text("This is bottom"),
      ),
    ),
    preferredSize: Size.fromHeight(50.0),
  ),
);}

In the above code, we have added a Container widget as the child of the PreferredSize widget. We have set the height of the Container to 50.0 and set its color to green. We have also added a Text widget inside the Container to display a message. Finally, we have specified the preferred size of the PreferredSize widget to 50.0.

Conclusion

The app bar is an important part of any application. It provides a quick and easy way of navigating to different sections of the app. With Flutter, we can easily customize the app bar to match the requirements of our application. By using the AppBar widget, we can create a basic app bar with a title and a leading icon. We can also add actions on the right side of the title. In addition to these, we can also add widgets below the app bar by using the bottom property.