Appbar Tutorial in Flutter | How to use App bar on Flutter

App bar is the topmost horizontal bar of the app. This is one of the components of Scaffold widget. The app bar may include back button, toolbar icons, title of screen, quick action buttons. AppBar is also a built-in widget in flutter. The AppBar widget is based on Material Design and much of the information is already provided by other classes like MediaQuery, Scaffold as to where the content of the AppBar should be placed.

Appbar can be inserted in Scaffold by using below format.

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

Appbar can be easily customized as it is very flexible widget. Key properties of appbar widget is given below.

AppBar( {Key key,
    Widget leading,
    bool automaticallyImplyLeading: true,
    Widget title,
    List<Widget> actions,
    Widget flexibleSpace,
    PreferredSizeWidget bottom,
    double elevation,
    Color shadowColor,
    ShapeBorder shape,
    Color backgroundColor,
    Brightness brightness,
    IconThemeData iconTheme,
    IconThemeData actionsIconTheme,
    TextTheme textTheme,
    bool primary: true,
    bool centerTitle,
    bool excludeHeaderSemantics: false,
    double titleSpacing: NavigationToolbar.kMiddleSpacing,
    double toolbarOpacity: 1.0,
    double bottomOpacity: 1.0,
    double toolbarHeight
  }
)

• actions: This property takes in a list of widgets as a parameter to be displayed after the title if the AppBar is a row.
• title: This property usually takes in the main widget as a parameter to be displayed in the AppBar.
• backgroundColor: This property is used to add colors to the background of the Appbar.
• elevation: This property is used to set the z-coordinate at which to place this app bar relative to its parent.
• shape: This property is used to give shape to the Appbar and manage its shadow.