An overview of the

The AppBar Material style application bar with toolbars and other widgets is commonly used for the scaffold. AppBar property, which places the application bar in a fixed-height Widget at the top of the screen. For the scrollable application bar, see SliverAppBar, which embeds an AppBar in a sliver for use in a CustomScrollView.

AppBar constructor

AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true.this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.textTheme,
    this.primary = true.this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0.this.bottomOpacity = 1.0,})Copy the code
  • Leading Component that precedes the title component, typically an icon button, such as a drawer button
  • AutomaticallyImplyLeading used with leading, depend on automaticallyImplyLeading = = true && leading = = null automatically does something, at this time
  • Title The main component of the appBar. It is of type Widget and usually displays text
  • Appbar can be viewed as a Row (children: []) layout
  • FlexibleSpace is also a widget, but it seems that there are some defined Widgets that I don’t know how to use because they feel a lot of duplication
  • The bottom widget appears at the bottom of the application bar. Usually a TarBar, a TAB bar
  • Elevation controls the coordinates of the shadow bar below
  • BackgroundColor backgroundColor
  • Brightness of the App Bar material
  • IconTheme Icon Theme setting
  • TextTheme sets the textTheme
  • Primary AppBar Specifies whether the primary AppBar is displayed at the top of the taskbar
  • CenterTitle Indicates whether the title is in the center
  • The spacing of 0.0 around the title content on the titleSpacing axis takes up all useful space
  • The degree of opacity of the toolbar of the application bar. The value 1.0 is completely opaque and the value 0.0 is completely transparent
  • Opacity at the bottom of the appBar is set the same way as toolbarOpacity

Example – to achieve a drawer of cloud disk search interface

class AppBarLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
        length: 3,
        child: new Scaffold(
          // The AppBar Material application bar, which has toolbars and other widgets, is used for the scaffold.appbar property.
          // This property places the application bar in a fixed-height widget at the top of the screen. For scrollable application bars,
          // See SliverAppBar, which embeds an AppBar in a sliver for use in a CustomScrollView.
          appBar: AppBar(
            // leading: ,

            // Now the Widget before the title is usually an icon button, but it can be any Widget
            leading: Builder(
              builder: (BuildContext context) {
                return IconButton(
                  icon: const Icon(Icons.menu),
                  // Open a drawer if there is one
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                  // Displays the descriptiontooltip: MaterialLocalizations.of(context).openAppDrawerTooltip, ); },),/ / use with leading depends on automaticallyImplyLeading = = true && leading = = null, at this time will automatically make some things.
            automaticallyImplyLeading: true.// The main Widget of appBar, type is Widget, so try to make input box?
            title: TextField(
                // Cursor color
                cursorColor: Colors.blueGrey),
            Appbar can be viewed as a Row (children: 
      
       []) layout
      
            actions: <Widget>[
              Container(
                padding: EdgeInsets.only(right: 16),
                child: Icon(Icons.search),
              ),
            ],
            // It is also a widget, but there are some defined Widgets that I don't know how to use.
            flexibleSpace: FlexibleSpaceBar(title: Text(' ')),
            // This widget appears at the bottom of the application bar. Usually a TarBar, a TAB bar
            bottom: new TabBar(tabs: <Widget>[
              new Tab(icon: Icon(Icons.cloud_done)),
              new Tab(icon: Icon(Icons.cloud_download)),
              new Tab(icon: Icon(Icons.cloud_upload)),
            ]),
            // Control the coordinates of the shadow bar below
            elevation: 4.0.// Background color
            backgroundColor: Colors.blueAccent,
            // Apply the brightness of the bar material.
            brightness: Brightness.light,
            // Icon theme Settings
            iconTheme: IconThemeData(),
            // Text theme Settings
            textTheme: TextTheme(),
            // Whether appbar is displayed at the top of the taskbar
            primary: true.// Whether the title is centered has not changed
            centerTitle: true.// The spacing of 0.0 around the title content on the horizontal axis takes up all useful space
            titleSpacing: 0.0.// How opaque the toolbar part of the application bar is. The value 1.0 is completely opaque and the value 0.0 is completely transparent.
            toolbarOpacity: 1.// Opacity at the bottom of appabr is set the same as toolbarOpacity
            bottomOpacity: 1,
          ),
          body: new TabBarView(children: <Widget>[
            new Icon(Icons.cloud_done, size: 100),
            new Icon(Icons.cloud_download, size: 100),
            new Icon(Icons.cloud_upload, size: 100),]),// Define an empty drawerdrawer: Drawer(), )); }}Copy the code

Effect: