Open In App

Flutter – AppBar Widget

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 are 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 the SliverAppBar 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




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


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




import "package:flutter/material.dart";
 
// function to trigger the build process
void main() {
  runApp(MyApp()); //MaterialApp
}
 
// ignore: non_constant_identifier_names
MaterialApp MyApp() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("GeeksforGeeks"),
        titleSpacing: 00.0,
        centerTitle: true,
        toolbarHeight: 60.2,
        toolbarOpacity: 0.8,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(25),
              bottomLeft: Radius.circular(25)),
        ),
        elevation: 0.00,
        backgroundColor: Colors.greenAccent[400],
      ), //AppBar
      body: const Center(
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(fontSize: 24),
        ),
      ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Removing Debug Banner
  );
}


Output:

 

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. toolBarOpacity is responsible for controlling the opacity of the toolbar portion of the appBar. It takes a double value as the parameter where 1.0 is the maximum opacity and 0.0 is full transparency. The fifth property is shape it is utilized to give a different shape to the AppBar by modifying the border of the AppBar. Inside the shape property we have used the borderRadius to make the bottom edges of the AppBar rounded by an angle of 25 degrees.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




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


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 a 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 displayed 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 an 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.



Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads