Flutter — App bar in detail

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 App-Bar in flutter.

Introduction to Appbar

AppBar is usually the topmost component of the app or sometimes the bottom-most, it contains the toolbar and some other common action buttons. The app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

Key Properties of Appbar Widget :-

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

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

(1) Create simple Appbar.

The MaterialApp widget provided Style to AppBar and the Scaffold widget by default places the AppBar widget at the top of the screen. This is just the bare basic out of the box AppBar provided by flutter. This AppBar is utilizing only the title property of the AppBar class, which takes in the main widget to be displayed in the AppBar.

home: Scaffold(
 appBar: AppBar(),
),

(2) Create leading button.

A widget to display before the title. Typically the leading widget is an Icon or an IconButton.

appBar: AppBar(
      leading: IconButton(
         icon: Icon(Icons.menu),
         onPressed: () {},
 ),//IconButton
),//AppBar

(3) Add title of Appbar.

appBar: AppBar(
      leading: IconButton(
         icon: Icon(Icons.menu),
         onPressed: () {}, 
      ),
      title: Text('Class Continue'),
),

(4) Center title in Appbar.

appBar: AppBar(
      leading: IconButton(
         icon: Icon(Icons.menu),
         onPressed: () {}, 
      ),
      title: Text('Class Continue'),
      centerTitle: true,
),

(5) Change background color of Appbar.

appBar: AppBar(
      leading: IconButton(
         icon: Icon(Icons.menu),
         onPressed: () {},  
      ),  
      title: Text('Class Continue'),
      //centerTitle: true,
      backgroundColor: Colors.indigo[300],
),

(6) 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: AppBar(
      leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {},
      ), 
      title: Text('Class Continue'),
      //centerTitle: true,
      backgroundColor: Colors.indigo[300],
      actions: <Widget>[
          Icon(Icons.search),
          Icon(Icons.more_vert), 
      ],
),

(7) Add padding on Appbar actions widget.

appBar: AppBar(
     leading: IconButton(
       icon: Icon(Icons.menu),
       onPressed: () {},
     ),
     title: Text('Class Continue'),
     //centerTitle: true,
     backgroundColor: Colors.indigo[300],
     actions: <Widget>[
        Icon(Icons.search),
           Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Icon(Icons.supervised_user_circle),
            ),
       Icon(Icons.more_vert),
    ],
),

(8) 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.

appBar: AppBar(
     leading: IconButton(
       icon: Icon(Icons.menu),
       onPressed: () {},
     ),
     title: Text('Class Continue'),
     //centerTitle: true,
     backgroundColor: Colors.indigo[300],
     actions: <Widget>[
        Icon(Icons.search),
           Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Icon(Icons.supervised_user_circle),
            ),
       Icon(Icons.more_vert),
    ],
     actionsIconTheme:IconThemeData(
        size: 30.0, 
        color: Colors.orange, 
        opacity: 0.7 
     ),                                                            ),

(9) Working with Appbar elevation(shadow).

Elevation property provides a shadow underneath the AppBar which in turn makes it look elevated.

appBar: AppBar(
     leading: IconButton(
       icon: Icon(Icons.menu),
       onPressed: () {},
     ),
     title: Text('Class Continue'),
     //centerTitle: true,
     backgroundColor: Colors.indigo[300],
     actions: <Widget>[
        Icon(Icons.search),
           Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Icon(Icons.supervised_user_circle),
            ),
       Icon(Icons.more_vert),
    ],
     actionsIconTheme:IconThemeData(
        size: 30.0, 
        color: Colors.orange, 
        opacity: 0.7 
     ),
    elevation: 30.0,
),

Thanks for reading if you want any help then subscribe me on YouTube.

Class Continue