Flutter – AppBar Widget

AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a flutter application is a widget or a combination of widgets. So AppBar is also a built-in class or widget in flutter which gives the functionality of the AppBar out of the box. 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. Though the AppBar class is very flexible and can be easily customized, we can also use SilverAppBar widget which gives scrollable functionality to the app bar. Or we can create our own custom app bar from scratch.

Constructor of AppBar class:

AppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
...}
)

Key Properties of Appbar Widget:

  • 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.

Example 1:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
      ), //AppBar
      body: const Center(
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(fontSize: 24),
        ), //Text
      ), // center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Removing Debug Banner
  )); //MaterialApp
}

chevron_right


Output:

default appbar



 

Explanation:

First, we have imported the material.dart file as the AppBar widget utilizes it, we will also do the same in the following two examples. Then we have our main function calling runApp. At top, we have MaterialApp widget followed by Scaffold. 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. In this case, it is a Text widget. 

In the body, we have a child text widget inside the center widget displaying the text ‘GeeksforGeeks‘, with a font size of 24. In the end, the debug banner has been disabled. This will be followed by the next two examples below.

Example 2:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import "package:flutter/material.dart";
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("GeeksforGeeks"),
        titleSpacing: 00.0,
        centerTitle: true,
        toolbarHeight: 60.2,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(360)),
        elevation: 0.00,
        backgroundColor: Colors.greenAccent[400],
      ), //AppBar
      body: const Center(
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(fontSize: 24),
        ), //Text
      ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Removing Debug Banner
  )); //MaterialApp
}

chevron_right


Output:

shape property of appbar

Explanation:



Here the AppBar widget is utilizing seven properties in total. It starts with the title ‘GeeksforGeeks’. The second is the titlespacing which takes in double as a parameter and in this case, it is set to 00.0 to keep text close together. The third property is centerTitle which takes in boolean as a parameter and is set to true here. The fourth property is toolbarHeight which also takes in double as a parameter. This property provides a shadow underneath the AppBar which in turn makes it look elevated. The fifth property is shape it is utilized to give a different shape to the AppBar by modifying the border of the AppBar. The sixth property is elevation, it defines the z-coordinates at which the AppBar is to be placed with respect to its parent. It also takes in double as a parameter. And the last is the backgroundColor which controls the background color of the AppBar, in this case, we have the signature geeksforgeeks greenAccect.

Example 3:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import "package:flutter/material.dart";
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("GeeksforGeeks"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.comment),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ), //IconButton
          IconButton(
            icon: Icon(Icons.settings),
            tooltip: 'Setting Icon',
            onPressed: () {},
          ), //IconButton
        ], //<Widget>[]
        backgroundColor: Colors.greenAccent[400],
        elevation: 50.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ), //IconButton
        brightness: Brightness.dark,
      ), //AppBar
      body: const Center(
        child: Text(
          "Geeksforgeeks",
          style: TextStyle(fontSize: 24),
        ), //Text
      ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Removing Debug Banner
  )); //MaterialApp
}

chevron_right


Output:

appbar with drawer and icons

Explanation:

Here we can see that in addition to the title on the app Bar we have three more icons on the AppBar, one on the left and two on the right of the title. This AppBar widget starts with the usual title property which is taking Text widget as a parameter. The title is followed by the action property which takes in a list of widgets as a parameter to be displayed after the title if the AppBar is a row. In this case, we can see the two icons namely the comment and setting. These two icons are  IconsButton widgets, utilizing three properties namely icon, tooltip, and onPressed function. The onPressed function is not specified in any of the IconButton so it is null. The icon property takes in string as a parameter which is the name of the specific icon. The tooltip property also takes in a string as the parameter which is displays in a floating label, while hovering with the mouse or on the long-press.  In the first IconButton we have Icons.comment & Comment Icon and in the second IconButton we have Icons.setting & Setting Icon as the parameter for the icon and tooltip respectively.  Now, all this is followed but the backgroundColor and elevation are set to Colors.greenAccent[400] and 50.0 respectively. After that, we have the leading property which takes in a widget as a parameter, to be displayed before the title in the AppBar. In this case, the leading is also a IconButton, which displays a menu icon. The onPressed property is not mentioned and the tooltip property is given a parameter of string ‘Menu Icon’. And the body is similar to the first and second examples.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_