Introduction to appBar developed by Flutter

Introduction to appBar

AppBar displays toolbar widgets, headers, titles, and actions on top of the app (if any).
And the bottom of APP is usually used for TabBar.

Description of the location map of appBar

The image below shows the position of each slot in the toolbar when the language is written from left to right (for example, English):

properties of appBar

actions → List?
A list of widgets to display in a row after the header widget. The most commonly used
actionsIconTheme → IconThemeData?
The color, opacity and size of the icon displayed in the application bar.
automaticallyImplyLeading → bool
Controls whether an attempt should be made to imply leading widgets if empty.
backgroundColor → Color?
The fill color used for the "material" of the app bar.
bottom → PreferredSizeWidget?
This widget is displayed at the bottom of the app bar.
bottomOpacity → double
How opaque the bottom part of the app bar is.
centerTitle → bool?
Whether the title should be centered.
elevation → double?
The z-coordinate at which to place this app bar relative to its parent.
excludeHeaderSemantics → bool
Whether the title should be wrapped with header Semantics.
flexibleSpace → Widget?
This widget is stacked behind the toolbar and the tab bar. Its height will be the same as the app bar’s overall height.
foregroundColor → Color?
The default color for Text and Icons within the app bar.
hashCode → int
The hash code for this object.read-onlyinherited
iconTheme → IconThemeData?
The color, opacity, and size to use for toolbar icons.
key → Key?
Controls how one widget replaces another widget in the tree.finalinherited
leading → Widget?
A widget to display before the toolbar’s title.
leadingWidth → double?
Defines the width of leading widget.
notificationPredicate → ScrollNotificationPredicate
A check that specifies which child’s ScrollNotifications should be listened to.
preferredSize → Size
A size whose height is the sum of toolbarHeight and the bottom widget’s preferred height.
primary → bool
Whether this app bar is being displayed at the top of the screen.
runtimeType → Type
A representation of the runtime type of the object.read-onlyinherited
scrolledUnderElevation → double?
The elevation that will be used if this app bar has something scrolled underneath it.
shadowColor → Color?
The color of the shadow below the app bar.
shape → ShapeBorder?
The shape of the app bar’s Material as well as its shadow.
surfaceTintColor → Color?
The color of the surface tint overlay applied to the app bar’s background color to indicate elevation.
systemOverlayStyle → SystemUiOverlayStyle?
Specifies the style to use for the system overlays that overlap the AppBar.
title → Widget?
The primary widget displayed in the app bar.
titleSpacing → double?
The spacing around title content on the horizontal axis. This spacing is applied even if there is no leading content or actions. If you want title to take all the space available, set this value to 0.0.
titleTextStyle → TextStyle?
The default text style for the AppBar’s title widget.
toolbarHeight → double?
Defines the height of the toolbar component of an AppBar.
toolbarOpacity → double
How opaque the toolbar part of the app bar is.
toolbarTextStyle → TextStyle?
The default text style for the AppBar’s leading, and actions widgets, but not its title.

instance of appBar

Let's look at an example first: we create an appBar whose leading is an IconButton, title is "appBar Demo", and actions add two IconButtons. The running effect diagram is as follows:

The source code is as follows:

import 'package:flutter/material.dart';

void main() => runApp(const AppBarApp());

class AppBarApp extends StatelessWidget {
    
    
  const AppBarApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return const MaterialApp(
      home: AppBarExample(),
    );
  }
}

class AppBarExample extends StatelessWidget {
    
    
  const AppBarExample({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar Demo'),
        leading: IconButton(
            icon: const Icon(Icons.add_alarm_rounded),
            tooltip: 'Show Snackbar',
            onPressed: () {
    
    
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a snackbar')));
            },
          ),

        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add_alarm_rounded),
            tooltip: 'Show Snackbar',
            onPressed: () {
    
    
              ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('This is a snackbar')));
            },
          ),
          IconButton(
            icon: const Icon(Icons.navigate_next),
            tooltip: 'Go to the next page',
            onPressed: () {
    
    
              Navigator.push(context, MaterialPageRoute<void>(
                builder: (BuildContext context) {
    
    
                  return Scaffold(
                    appBar: AppBar(
                      title: const Text('Next page'),
                      // automaticallyImplyLeading: false,
                    ),
                    body: const Center(
                      child: Text(
                        'This is the next page',
                        style: TextStyle(fontSize: 24),
                      ),
                    ),
                  );
                },
              ));
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'This is the home page',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

There is not much to explain. Let’s look at the
leading image first. In this example, we have added an IconButton.
The title adds a Text('AppBar Demo'), and
the actions area also adds 2 IconButtons.
flexibleSpace and bottom are summarized later.