Flutter AppBar Widget (original) (raw)

Last Updated : 28 Feb, 2025

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

AppBar

The Constructor of the AppBar Class

AppBar AppBar({
Key? key,
Widget? leading,
bool automaticallyImplyLeading = true,
Widget? title,
List? 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

Property Description
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 Demonstration of AppBar in Flutter Application

**Example 1:

Dart `

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:

default appbar

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

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() { //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.

**Example 3:

Dart `

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:

appbar with drawer and icons

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