Flutter AppBar Brief

AppBar

AppBar is displayed at the top of the app, or the top bar, which corresponds to the Android Toolbar. As shown below:

insert image description here

The basic composition of an AppBar

insert image description here


1 Only the title and no other buttons

  Widget buildDefaultBar(String title) {
   return appBar =  AppBar(
      // The title is centered
      centerTitle: true,
      // back button placeholder
      leading: Container(),
      // title display
      title: Text(title),
    );
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2 Display title and back button

insert image description here

  /**
   * title text displayed by the appBar
   * backIcon appBar display back button icon
   */
  Widget buildBackBar(String title,{backIcon=Icons.arrow_back_ios}) {
    return appBar =AppBar(
      centerTitle: true,
      //A control displayed in front of the title, the logo of the application is usually displayed on the home page; it is usually displayed as a back button in other interfaces
      leading: IconButton(
          icon: Icon(backIcon),
          onPressed: () {
            Navigator.pop(context);
          }),
      //The main content in the Toolbar, usually displayed as the title text of the current interface
      title: Text(title),
    );
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

3 Display the title and back button and share button on the right

code block encapsulation

  /**
   * title text displayed by the appBar
   * backIcon appBar display back button icon
   * The icon collection on the far right of the actions appBar
   */
  Widget buildBackAndOtherBar(String title,{backIcon=Icons.arrow_back_ios,List<Widget> actions}) {
    return appBar =AppBar(
      centerTitle: true,
      //A control displayed in front of the title, the logo of the application is usually displayed on the home page; it is usually displayed as a back button in other interfaces
      leading: IconButton(
          icon: Icon(backIcon),
          onPressed: () {
            Navigator.pop(context);
          }),
      //The main content in the Toolbar, usually displayed as the title text of the current interface
      title: Text(title),
      //The button group displayed on the right side of the title
      actions:actions,
    );
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

Show title and back button and share button on the right

buildBackAndOtherBar("Test 3", actions: <Widget>[
                IconButton(icon: Icon(Icons.share), onPressed: () {}),
              ]);
  • 1
  • 2
  • 3

insert image description here

#### Display title and back button and share button on the right + popup

insert image description here
insert image description here

buildBackAndOtherBar("Test 2", actions: <Widget>[
                IconButton(icon: Icon(Icons.share), onPressed: () {}),
                PopupMenuButton(
                  itemBuilder: (BuildContext context) =>
                      <PopupMenuItem<String>>[
                    PopupMenuItem<String>(
                      child: Text("Hotness"),
                      value: "hot",
                    ),
                    PopupMenuItem<String>(
                      child: Text("latest"),
                      value: "new",
                    ),
                  ],
                  onSelected: (String action) {
                    switch (action) {
                      case "hot":
                        print("hot");
                        break;
                      case "new":
                        print("new");
                        break;
                    }
                  },
                  onCanceled: () {
                    print("onCanceled");
                  },
                )
              ]);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

Related: Flutter AppBar Brief