Flutter Appbar : A Complete Guide for Beginners

Flutter Appbar is the most widely used widget in a flutter. It is a material design app bar that consists of the toolbar and other widgets like Tabbar, drawer, Iconbuttons, and many more. It is part of the Scaffold widget. In this entire tutorial, you will know how to create appbar and do manipulation in it.

How to create a Flutter Appbar ?

You can create an AppBar using AppBar() class. It used the AppBar constructor to make customization of it. You will know all the general properties to manipulate it. Let’s create a Appbar. Run the following line of code to create it.

Scaffold(
          appBar: AppBar(
            title: Text("My Appbar app")
          ),
         )

Output

How to Use Flutter Appbar ?

In this section, you will know all the general manipulation that you can do using various properties of the Flutter AppBar constructor()

1. centerTitle

If you want to center the title of the App bar then you can use it. It is a boolean type so it accepts only true or false. By default, it is set to false. But if you centerTitle: true then the title will align to the center.

Scaffold(
          appBar: AppBar(
            title: Text("My Appbar app"),
            centerTitle: true,
          ),
         )

Output

2. backgroundColor

The default background color of the appbar is blue. You can change it using the backgroundColor property. For example, I want to change the color to red then I will use the following code.

Scaffold(
          appBar: AppBar(
            title: Text("My Appbar app"),
            centerTitle: true,
            backgroundColor: Colors.red,
          ),
         )

Output
Output

3. actions

The actions property allows you to add a single widget or a list of widgets after the title button. For example, I want to add a Setting and search icons after the title then I will call the IconButton as the children of the action property.

Scaffold(
          appBar: AppBar(
            title: Text("My Appbar app"),
            centerTitle: true,
            backgroundColor: Colors.red,
            actions: [
              IconButton(onPressed: () => {}, icon: Icon(Icons.settings)),
              IconButton(onPressed: () => {}, icon: Icon(Icons.search))
            ],
          ),
         )

Output

4 . leading

The leading property allows you to add a widget before the title of the App bar. Generally, the drawer is add in the leading.  In our example, let’s add another icon a back arrow button.

Scaffold(
          appBar: AppBar(
            title: Text("My Appbar app"),
            centerTitle: true,
            backgroundColor: Colors.red,
            actions: [
              IconButton(onPressed: () => {}, icon: Icon(Icons.settings)),
              IconButton(onPressed: () => {}, icon: Icon(Icons.search))
            ],
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => {},
            ),
          ),
         )

Output

5. elevation

The elevation argument allows you to add a shadow below the appbar. For example, I want an elevation of 15 then I will use an elevation: 15.

Scaffold(
          appBar: AppBar(
            title: Text("My Appbar app"),
            centerTitle: true,
            backgroundColor: Colors.red,
            actions: [
              IconButton(onPressed: () => {}, icon: Icon(Icons.settings)),
              IconButton(onPressed: () => {}, icon: Icon(Icons.search))
            ],
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => {},
            ),
            elevation:15,
          ),
         )

Output

6. bottom

Using it you can add widgets below the appbar. It accepts only PreferredSizeWidget type only and it is a tab bar. Let’s add a tab bar below the app bar.

If you simply add TabBar widgets at the bottom then it will not work. But you have to also define your tab controller and extend stateful widget with

SingleTickerProviderStateMixin. After that, you have initialized the number of tabs you want. Use the following code and add tab bar below the app bar.

import 'package:flutter/material.dart';

class MyAppBarApp extends StatefulWidget {
  const MyAppBarApp({Key? key}) : super(key: key);

  @override
  _MyAppBarAppState createState() => _MyAppBarAppState();
}

class _MyAppBarAppState extends State
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Text("My Appbar app"),
            centerTitle: true,
            backgroundColor: Colors.red,
            actions: [
              IconButton(onPressed: () => {}, icon: Icon(Icons.settings)),
              IconButton(onPressed: () => {}, icon: Icon(Icons.search))
            ],
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => {},
            ),
            elevation: 20,
            bottom: TabBar(
              controller: _tabController,
              tabs: [
                Tab(
                  child: Text("Tab A"),
                ),
                Tab(
                  child: Text("Tab B"),
                ),
                Tab(
                  child: Text("Tab B"),
                ),
              ],
            ),
           
          ),
        ));
  }
}

Output

These are the general properties that allow you to manipulate and change the look of the appbar. There are also other properties but you will not generally use them. I hope you have liked this tutorial. If you have doubts then you can contact us for more help.