AppBar

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

The basic composition of an AppBar

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

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

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

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