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 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, and 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.

The Constructor of the AppBar Class

AppBar AppBar({
  Key? key,
  Widget? leading,
  bool automaticallyImplyLeading = true,
  Widget? title,
  List<Widget>? actions,
  Widget? flexibleSpace,
  PreferredSizeWidget? bottom,
  double? elevation,
  double? scrolledUnderElevation,
  bool Function(ScrollNotification) notificationPredicate = defaultScrollNotificationPredicate,
  Color? shadowColor,
  Color? surfaceTintColor,
  ShapeBorder? shape,
  Color? backgroundColor,
  Color? foregroundColor,
  IconThemeData? iconTheme,
  IconThemeData? actionsIconTheme,
  bool primary = true,
  bool? centerTitle,
  bool excludeHeaderSemantics = false,
  double? titleSpacing,
  double toolbarOpacity = 1.0,
  double bottomOpacity = 1.0,
  double? toolbarHeight,
  double? leadingWidth,
  TextStyle? toolbarTextStyle,
  TextStyle? titleTextStyle,
  SystemUiOverlayStyle? systemOverlayStyle,
  bool forceMaterialTransparency = false,
  Clip? clipBehavior,
})

Key Properties of Appbar Widget

Example Demonstration of AppBar in Flutter Application

Example 1:

import 'package:flutter/material.dart';

void main() {
  //MaterialApp
  runApp(gfgApp()); 
}

MaterialApp gfgApp() {
  
  return MaterialApp(
    
    //Scaffold
    home: Scaffold(
        
      //AppBar
      appBar: AppBar(
        backgroundColor: Colors.blue,
		foregroundColor: Colors.white,
        title: const Text('GeeksforGeeks'),
      ), 
      
      // center
      body: const Center(
        
        //Text
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(fontSize: 24),
        ), 
      ), 
    ), 
    
    //Removing Debug Banner
    debugShowCheckedModeBanner: false, 
  );
}

Output:

Explanation of the above Program:

First, we have imported the material.dart file as the AppBar widget need 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:

import "package:flutter/material.dart";

// function to trigger the build process
void main() {
  //MaterialApp
  runApp(MyApp()); 
}

// ignore: non_constant_identifier_names
MaterialApp MyApp() {
  return MaterialApp(
      
    //Scaffold
    home: Scaffold(
      
      //AppBar
      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],
        foregroundColor: Colors.white,
      ),
      
      //Center
      body: const Center(
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(fontSize: 24),
        ),
      ), 
    ), 
    
    //Removing Debug Banner
    debugShowCheckedModeBanner: false, 
  );
}

Output:

Explanation of the above Program:

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 and foregroundColor which controls the background color of the AppBar and foreground color defines default color of elements in appbar , in this case, we have the signature geeksforgeeks in white color and background in greenAccect color.

Example 3:

import "package:flutter/material.dart";
import 'package:flutter/services.dart';

void main() {
  //MaterialApp
  runApp(gfgApp()); 
}

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

Output:

Explanation of the above Program:

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 by the backgroundColor and foregroundColor which controls the background color of the AppBar and foreground color defines default color of elements in appbar , in this case, we have the signature geeksforgeeks, icons, ..etc in white color and background in greenAccect color followed by elevation 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.