Flutter AppBar

App bar is a horizontal bar that is displayed at the top of the screen. This is one of the main components of Scaffold widget. The app bar includes the toolbar icons, title of screen, quick action buttons.

To insert the app bar into your app, you need scaffold() widget:

Scaffold(
   appBar: AppBar( //appbar widget on Scaffold
          title:Text("AppBar"), //title aof appbar
          backgroundColor: Colors.redAccent, //background color of appbar
    ),
)

Constructor of appBar() widget.

AppBar(
   {Key? key,
   Widget? leading,
   bool automaticallyImplyLeading: true,
   Widget? title,
   List? actions,
   Widget? flexibleSpace,
   PreferredSizeWidget? bottom,
   double? elevation,
   Color? shadowColor,
   ShapeBorder? shape,
   Color? backgroundColor,
   Color? foregroundColor,
   Brightness? brightness,
   IconThemeData? iconTheme,
   IconThemeData? actionsIconTheme,
   TextTheme? textTheme,
   bool primary: true,
   bool? centerTitle,
   bool excludeHeaderSemantics: false,
   double? titleSpacing,
   double toolbarOpacity: 1.0,
   double bottomOpacity: 1.0,
   double? toolbarHeight,
   double? leadingWidth,
   bool? backwardsCompatibility,
   TextStyle? toolbarTextStyle,
   TextStyle? titleTextStyle,
   SystemUiOverlayStyle? systemOverlayStyle}
)

The properties of this constructor are explained below:

1. leading - widget

You need to pass the widget into this parameter and it will be placed on the start-left side of an appbar. If there is any drawer into the same scaffold where app bar is implemented, the menu icon will automatically appear. The back button will appear in the same way when there is a back routing history of your app. 

AppBar( //appbar widget on Scaffold
  leading: IconButton( //menu icon button at start left of appbar
    onPressed: (){
         //code to execute when this button is pressed
    },
    icon: Icon(Icons.menu),
  ),
),

2. automaticallyImplyLeading - bool

If you have implemented a drawer to the same scaffold where you have placed appBar, there will be a menu icon placed at leading of app bar automatically. In the same way, whenever there is backward routing history, the back icon will appear at leading. You can control this behavior of appBar with automaticallyImplyLeading property. By default, its value is true.  Make it false, if you don't want automatic placement of menu or back icons at leading. 

AppBar(
  automaticallyImplyLeading: false,
)

3. title - Widget

This widget displays after the leading widget from the left side of app bar. Normally, it is used to show the title of the active screen of the app. You can pass any widget into it, normally, Text() widget is passed to show textual title on app bar. 

AppBar(
  title:Text("Title of App"),
)

4. actions - List of Widget

You need to pass the list of widget into this parameter of AppBar class. The widgets will be displayed at the right side of app bar. Normally, quick action buttons are placed on this property. 

AppBar(
  actions: [
    IconButton(
      icon: Icon(Icons.camera), 
      onPressed: (){
        //code to execute when this button is pressed
      }
    ),

    IconButton(
      icon: Icon(Icons.search), 
      onPressed: (){
        //code to execute when this button is pressed
      }
    ),

    //more widgets to place here
  ],
)

See this Guide: How to Add ’⋮’ Popup Menu on Flutter AppBar

5. bottom - PreferredSizeWidget

You need to pass a widget with constant height into this property. You can implement CupertinoTabBar, ObstructingPreferredSizeWidget, PreferredSize, TabBar into this property. 

DefaultTabController(
  length: 2, //numbers of tab
  child:Scaffold(
    appBar: AppBar( //appbar widget on Scaffold
      bottom: TabBar(
        tabs: [
            Tab(icon: Icon(Icons.home)),
            Tab(icon: Icon(Icons.send))
            //more tabs here
        ],
      ),
    ), 
  )   
)

6. elevation - double

This property is used to raise the app bar using shadow, you need to pass the double value which determines the height of elevation of app bar.

AppBar(
  elevation: 30.0,
)

7. backgroundColor - Color

This property is used to set the background color of app bar.

AppBar(
  backgroundColor: Colors.redAccent,
)

8. brightness - Brightness

This property is used to set the brightness scheme of app bar. Suppose, you have set background color to dark type color then you need to set the brightness to dark so that the content inside it gets displayed in a light color or vice versa. 

AppBar(
  brightness: Brightness.dark,
)

Dark icon on status bar due to Brightness.light	Light icons on status bar due to Brightness.dark

Example Code:

import 'package:flutter/material.dart';

void main() {
   runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController( //controller for TabBar
      length: 2, //lenght of tabs in TabBar
      child: MaterialApp(
         home: HomePage(),
      )
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[100],
      appBar: AppBar(
          title:Text("Title of App"), //title of app
          backgroundColor: Colors.redAccent, //background color of app bar
          brightness: Brightness.dark, //redAccent is darker color so set brightness to dark
          elevation: 5.0, //elevation value of appbar
           bottom: TabBar( //tabbar at bottom of appbar
            onTap: (index){
              print("selected tab is $index");
            },
            tabs: [
                Tab(icon: Icon(Icons.home)),
                Tab(icon: Icon(Icons.send))
                //more tabs here
            ],
          ),
          actions: [ //actions widget in appbar
            IconButton(
              icon: Icon(Icons.camera), 
              onPressed: (){
                //code to execute when this button is pressed
              }
            ),

            IconButton(
              icon: Icon(Icons.search), 
              onPressed: (){
                //code to execute when this button is pressed
              }
            ),
            //more widgets to place here
          ], 
        ),

        drawer: Drawer(), //drawer on scaffold, it will create menu icon on appbar
 
        body: Center( //content body on scaffold
           child: Text("AppBar example")
        )
     );
  }
}

The output of example code:

AppBar with title and redAccent background color	AppBar with bottom TabBar and actions	AppBar with automatic leading due to Drawer in scaffold