AppBar is introduced

AppBar is a Material Design-based application bar that is used inside the Scaffold as the top navigation bar.

Why AppBar

1. The navigation bar is generally composed of left function keys (back key, menu key), title and right function keys, while AppBar has these components built-in and is very convenient to use.

2, can make some special navigation bar, such as scrollable navigation bar.

3. Insert content according to the environment MediaQuery population to avoid system UI intrusion.

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

AppBar properties and description

There are 28 attributes in total

field attribute describe
key Key Using keys as components move through the component tree preserves the previous state of the component
leading Widget Usually returns a return key (IconButton)
leadingWidth double Width of left leading, default 56
automaticallyImplyLeading bool Used with leading, if true and leading is empty, the return key is automatically configured
title Widget Title of the navigation bar
centerTitle bool Whether the title is centered varies with operating systems
actions List A list of widgets
bottom PreferredSizeWidget The control that appears at the bottom of the navigation bar
elevation double Controls the size of the shadow below the navigation bar
shadowColor Color Controls the color of the shadow below the navigation bar
shape ShapeBorder Navigation bar shapes and shadows
backgroundColor Color The background color of the navigation bar
foregroundColor Color Navigation bar text and icon color
backwardsCompatibility bool Used with foregroundColor
iconTheme IconThemeData Navigation bar icon color, transparency, size configuration
actionsIconTheme IconThemeData You can set the color, transparency, and size of the icon on the right of the navigation bar
textTheme TextTheme The layout style of the navigation text
primary bool Whether the navigation bar is displayed at the top of the screen
excludeHeaderSemantics bool Whether the title should be wrapped in [Semantics], false by default
titleSpacing double Title Spacing of content
toolbarOpacity double Transparency of navigation bar
bottomOpacity double Transparency at the bottom of the navigation bar
toolbarHeight double The height of the navigation bar, default kToolbarHeight
toolbarTextStyle TextStyle The color of the navigation icon
titleTextStyle TextStyle The default color for the navigation bar title
flexibleSpace Widget Stacked behind the toolbar and TAB bar
systemOverlayStyle SystemUiOverlayStyle The style of the overlay
brightness Brightness Navigation bar brightness, change property deprecated, replaced with systemOverlayStyle

Use AppBar in detail

1, the key

Keys are used as identifiers for widgets, Elements, and SemanticsNodes, and can be used to keep components as they move through the component tree.

Method of use

GlobalKey _appBarKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      key: _appBarKey,
    ),
  );
}
Copy the code

2, leading

A Widget displayed to the left of the appBar, typically displaying the return key Icon or IconButton

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
    ),
  );
}
Copy the code

3, leadingWidth

Width of left leading, default 56

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      leadingWidth: 60,),); }Copy the code

4, automaticallyImplyLeading

When leading is not configured, a return key is displayed automatically in the secondary page. The default value is true

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      automaticallyImplyLeading: false,),); }Copy the code

5, the title

The title of the navigation bar is usually the title text of the current page

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),),); }Copy the code

6, centerTitle

Whether the title is centered or not varies depending on the operating system. By default, the title is displayed on the left of Android and in the middle of Apple

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,),); }Copy the code

7, the actions

A list of widgets that represent menus displayed in the Toolbar, usually represented by IconButton for common menus; PopupMenuButton is usually used for menus that are not commonly used to display as three dots. After clicking, a secondary menu pops up

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "Sweep it.",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "Add",
          icon: Icon(Icons.add),
        )
      ],
    ),
  );
}
Copy the code

8, bottom

The control that appears at the bottom of the application bar, typically TabBar

Method of use

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State<AppBarExample> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "The train", icon: Icon(Icons.bus_alert),),
            Tab(text: "Car", icon: Icon(Icons.bus_alert),) ], ), ), ); }}Copy the code

9, elevation,

Controls the size of the shadow below the application bar. This value cannot be a negative value.

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,),); }Copy the code

10, shadowColor

Controls the color of the shadow below the navigation bar

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
    ),
  );
}
Copy the code

11, shape

Navigation bar shapes and shadows

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
      shape: RoundedRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 5)))); }Copy the code

12, backgroundColor

The background color of the navigation bar

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.orange,
    ),
  );
}
Copy the code

13, foregroundColor

Navigation bar text and icon color

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
    ),
  );
}
Copy the code

14, backwardsCompatibility

Used with foregroundColor

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
      backwardsCompatibility: true,),); }Copy the code

15, iconTheme

Navigation bar icon color, transparency, size configuration

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      iconTheme: IconThemeData(
        color: Colors.orange,
        opacity: 1,
        size: 50),),); }Copy the code

16, actionsIconTheme

You can set the color, transparency, and size of the icon on the right of the navigation bar

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "Sweep it.",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "Add",
          icon: Icon(Icons.add),
        )
      ],
      actionsIconTheme: IconThemeData(
        color: Colors.purple,
      ),
    ),
  );
}
Copy the code

17, textTheme

Navigation bar text layout style, use the default ThemeData. PrimaryTextTheme

In the 18th and primary

Whether the navigation bar is displayed at the top of the screen

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,),); }Copy the code

19, excludeHeaderSemantics

Whether the title should be wrapped in [Semantics], false by default

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,
      excludeHeaderSemantics: true,),); }Copy the code

20, titleSpacing

The spacing of header content, if 0, takes up all space

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,),); }Copy the code

21, toolbarOpacity

Transparency of navigation bar

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarOpacity: 0.5,),); }Copy the code

22, bottomOpacity

Transparency at the bottom of the navigation bar

Method of use

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State<AppBarExample> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "The train", icon: Icon(Icons.bus_alert),),
            Tab(text: "Car", icon: Icon(Icons.bus_alert),)
          ],
        ),
				bottomOpacity: 0.5,),); }}Copy the code

23, toolbarHeight

The height of the navigation bar, default kToolbarHeight

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarHeight: 200,),); }Copy the code

24, toolbarTextStyle

The color of the navigation icon

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      toolbarTextStyle: TextStyle(
        color: Colors.black
      ),
    ),
  );
}
Copy the code

25, titleTextStyle

The default color for the navigation bar title

Method of use

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,
      titleTextStyle: TextStyle(
        color: Colors.red
      ),
    ),
  );
}
Copy the code

FlexibleSpace, systemOverlayStyle, Brightness

FlexibleSpace and systemOverlayStyle are generally used in conjunction with SliverAppBar. There is no more description here. Was disabled with the systemOverlayStyle?

conclusion

Here are all the ways to use AppBar. The most commonly used genera are leading, title, Actions, centerTitle, bottom, and backgroundColor. The other attributes are only used in specific situations.