material-components_material-components-flutter/docs/components/top_app_bars.md

Top app bar

The top app bar displays information and actions relating to the current screen.

Contents

• Using the top app bar
• Regular top app bar
• Contextual action bar
• Theming a top app bar

Using the top app bar

The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

A regular top app bar can transform into a contextual action bar.

Before you can use Material buttons, you need to import the Material Components package for Flutter:

package:flutter/material.dart

You need to use MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Making the top app bar accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Types

There are two types of top app bar: 1. regular top app bar 2. contextual action bar

Regular top app bar

The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

Regular top app bar example

AppBar

• Class definition
• GitHub source
• Dartpad Demo

The following example shows a top app bar with a page title, a navigation icon, two action icons, and an overflow menu:

AppBar(
  leading: Icon(Icons.menu),
  title: Text('Page title'),
  actions: [
    Icon(Icons.favorite),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: Icon(Icons.search),
    ),
    Icon(Icons.more_vert),
  ],
  backgroundColor: Colors.purple,
),

Anatomy and Key properties for top app bar

1. Container (optional)
2. Navigation icon (optional)
3. Title (optional)
4. Action items (optional)
5. Overflow menu (optional)

Container for top app bar

	Property
Color	color parameter
Stroke color	In leading parameter, use Icon widget. Set color
Shape	shape parameter
Elevation	elevation parameter

Navigation icon for top app bar (optional)

	Property
Icon	In leading parameter, use IconButton Widget
Color	In leading parameter, use IconButton Widget and set parameter color
Size	In leading parameter, use IconButton Widget and set parameter iconSize
Gravity	titleSpacing parameter
Padding	Wrap Icon widget with Padding widget

Title for top app bar (optional)

	Property
Text label	In title parameter, use Text widget
Color	In title parameter, use Text Widget and and set parameter style
Typography	In title parameter, use Text Widget and and set parameter style

Action item for top app bar (optional)

	Property
Icon	In action parameter, use IconButton widget and set parameter icon
Color	In action parameter, use IconButton widget and set parameter color OR set actionIconsTheme
Size	In action parameter, use IconButton widget and set parameter iconSize OR set actionIconsTheme
Padding	Wrap IconButton widget with Padding widget

Overflow menu for top app bar (optional)

	Property
Icon	In action parameter, add IconButton widget to the end of Widget list and set parameter icon within IconButton
Color	In action parameter, add IconButton widget to the end of Widget list and set parameter color within IconButton
Size	In action parameter, add IconButton widget to the end of Widget list and set parameter iconSize within IconButton
Padding	In action parameter, add IconButton widget to the end of Widget list and wrap that Widget with a Padding widget

Contextual action bar

A top app bar can transform into a contextual action bar to provide contextual actions to selected items. For example, upon user selection of photos from a gallery, the top app bar transforms to a contextual app bar with actions related to the selected photos.

When a top app bar transforms into a contextual action bar, the following changes occur:

• The bar color changes
• Navigation icon is replaced with a close icon
• Top app bar title text converts to contextual action bar text
• Top app bar actions are replaced with contextual actions
• Upon closing, the contextual action bar transforms back into a top app bar.

Contextual action bar example

AppBar

• Class definition
• GitHub source
• Dartpad Demo

The following example shows a contextual action bar with a contextual title, a close icon, two contextual action icons, and an overflow menu:

AppBar(
  leading: Icon(Icons.close),
  title: Text('1 selected'),
  actions: [
    Icon(Icons.file_upload),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: Icon(Icons.delete),
    ),
    Icon(Icons.more_vert),
  ],
  backgroundColor: Colors.black87,
),

Anatomy and Key properties for contextual action bar

1. Close Button (optional)
2. Contextual title (optional)
3. Contextual action items (optional)
4. Overflow menu (optional)

Close Button for contextual action bar (optional)

	Property
Icon	In leading parameter, use IconButton Widget
Color	In leading parameter, use IconButton Widget and set parameter color
Size	In leading parameter, use IconButton Widget and set parameter iconSize
Gravity	titleSpacing parameter
Padding	Wrap Icon wiget with Padding widget

Contextual title for contextual action bar (optional)

	Property
Text label	In title parameter, use Text widget
Color	In title parameter, use Text Widget and and set parameter style
Typography	In title parameter, use Text Widget and and set parameter style

Contextual action items for contextual action bar (optional)

	Property
Icon	In action parameter, use IconButton widget and set parameter icon
Color	In action parameter, use IconButton widget and set parameter color OR set actionIconsTheme
Size	In action parameter, use IconButton widget and set parameter iconSize OR set actionIconsTheme
Padding	Wrap IconButton widget with Padding widget

Overflow menu for contextual action bar (optional)

	Property
Icon	In action parameter, add IconButton widget to the end of Widget list and set parameter icon within IconButton
Color	In action parameter, add IconButton widget to the end of Widget list and set parameter color within IconButton
Size	In action parameter, add IconButton widget to the end of Widget list and set parameter iconSize within IconButton
Padding	In action parameter, add IconButton widget to the end of Widget list and wrap that Widget with a Padding widget

Theming a top app bar

The top app bar supports Material Theming and can be customized in terms of color, typography and shape.

Top app bar theming example

• Regular Top App Bar with Theme Dartpad Demo
• Contextual Action Bar with Dartpad Demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
      theme: _buildShrineTheme(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: Text('Page title'),
        actions: [
          Icon(Icons.favorite),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Icon(Icons.search),
          ),
          Icon(Icons.more_vert),
        ],
      ),
      body: Container(),
    );
  }
}

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    colorScheme: _shrineColorScheme,
    accentColor: shrineBrown900,
    primaryColor: shrinePink100,
    buttonColor: shrinePink100,
    scaffoldBackgroundColor: shrineBackgroundWhite,
    cardColor: shrineBackgroundWhite,
    textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100),
    errorColor: shrineErrorRed,
    buttonTheme: const ButtonThemeData(
      colorScheme: _shrineColorScheme,
      textTheme: ButtonTextTheme.normal,
    ),
    primaryIconTheme: _customIconTheme(base.iconTheme),
    textTheme: _buildShrineTextTheme(base.textTheme),
    primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
    iconTheme: _customIconTheme(base.iconTheme),
  );
}

IconThemeData _customIconTheme(IconThemeData original) {
  return original.copyWith(color: shrineBrown900);
}

TextTheme _buildShrineTextTheme(TextTheme base) {
  return base
      .copyWith(
        caption: base.caption.copyWith(
          fontWeight: FontWeight.w400,
          fontSize: 14,
          letterSpacing: defaultLetterSpacing,
        ),
        button: base.button.copyWith(
          fontWeight: FontWeight.w500,
          fontSize: 14,
          letterSpacing: defaultLetterSpacing,
        ),
      )
      .apply(
        fontFamily: 'Rubik',
        displayColor: shrineBrown900,
        bodyColor: shrineBrown900,
      );
}

const ColorScheme _shrineColorScheme = ColorScheme(
  primary: shrinePink100,
  primaryVariant: shrineBrown900,
  secondary: shrinePink50,
  secondaryVariant: shrineBrown900,
  surface: shrineSurfaceWhite,
  background: shrineBackgroundWhite,
  error: shrineErrorRed,
  onPrimary: shrineBrown900,
  onSecondary: shrineBrown900,
  onSurface: shrineBrown900,
  onBackground: shrineBrown900,
  onError: shrineSurfaceWhite,
  brightness: Brightness.light,
);

const Color shrinePink50 = Color(0xFFFEEAE6);
const Color shrinePink100 = Color(0xFFFEDBD0);
const Color shrinePink300 = Color(0xFFFBB8AC);
const Color shrinePink400 = Color(0xFFEAA4A4);

const Color shrineBrown900 = Color(0xFF442B2D);
const Color shrineBrown600 = Color(0xFF7D4F52);

const Color shrineErrorRed = Color(0xFFC5032B);

const Color shrineSurfaceWhite = Color(0xFFFFFBFA);
const Color shrineBackgroundWhite = Colors.white;

const defaultLetterSpacing = 0.03;