1.Scaffold (Layout)

The Scaffold implements the basic Material Design layout structure. The various layout elements on a single interface defined in the Material design are supported in Scaffold.

Scaffolding has the following major properties:

  • AppBar – An appBar displayed at the top of the interface.
  • Body – The main content Widget displayed in the current interface.
  • Floatingactionbutton-material design defines the FAB, the main function button of the interface.
  • PersistentFooterButtons – Fixed to the buttons displayed below, such as the CONFIRM and cancel buttons at the bottom of the dialog box.
  • Drawer – drawer menu control.
  • BackgroundColor – the content of the background color, the default is used ThemeData. ScaffoldBackgroundColor values.
  • BottomNavigationBar – Displays the navigation bar at the bottom of the page.
  • ResizeToAvoidBottomPadding – similar to the Android: Android windowSoftInputMode = ‘adjustResize’, control interface content body whether or not to the bottom of the layout to avoid being covered, For example, when the keyboard is displayed, rearrange the layout so that the keyboard does not cover the content. The default value is true.
@override Widget build(BuildContext context) {return new Scaffold(appBar: new appBar (title: new Text(' application ')), body: new Center( child: new Text('Hello'), ), ); }Copy the code

2.AppBar (Title Bar)

AppBar is a top bar that corresponds to the Android Toolbar.

AppBar has the following common properties:

  • Leading → Widget – a control displayed in front of the title, usually showing the app’s logo on the front page; It is usually displayed as a back button on other screens.
  • Title → Widget – The main content of the Toolbar, usually displayed as the title text of the current interface.
  • Actions → List – A List of widgets that represent menus displayed in the Toolbar. For commonly used menus, IconButton is usually used; PopupMenuButton is usually used for menus that are not commonly used to display as three dots. After clicking, a secondary menu pops up.
  • Bottom → PreferredSizeWidget – An AppBarBottomWidget object, usually a TabBar. Use to display a Tab navigation bar under the Toolbar header.
  • Elevation → double – Control z order. Default is 4. For scrollable SliverAppBar, 0 when the SliverAppBar is at the same level as the content. Change the elevation value when the content scrolls the SliverAppBar to Toolbar.
  • FlexibleSpace → Widget – a control displayed below the AppBar at the same height as the AppBar height to achieve special effects. This property is usually used in SliverAppBar.
  • BackgroundColor → Color – The Color of the Appbar. The default value is themedata.primarycolor. A change value is usually used with the following three attributes.
  • Brightness and brightness – Appbar brightness, white and black two kinds of themes, the default value is ThemeData. PrimaryColorBrightness.
  • IconTheme → IconThemeData – Appbar Icon color, transparency, and size information. The default value is ThemeData primaryIconTheme.
  • TextTheme → textTheme – Text style on Appbar.
  • CenterTitle → bool – Indicates whether the title is displayed in center. The default value varies according to the OPERATING system.
  • ToolbarOpacity – double

SelectView(IconData icon, String text, String id) {return new PopupMenuItem<String>(value: id, child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ new Icon(icon, color: Colors.blue), new Text(text), ], ) ); } appBar: new appBar (title: new Text(' home '), leading: new Icon(Icons. Home), backgroundColor: colors.blue, centerTitle: True, Actions: <Widget>[// Unhidden menu new IconButton(icon: new icon (icons.add_alarm), tooltip: 'Add Alarm', onPressed: () {}), // Hidden menu New PopupMenuButton<String>(itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[this.selectView (Icons. Message, 'initiate group conversation ', 'A'), Group_add, 'add service ', 'B'), this.selectView (Icons. Cast_connected, 'C'),], onSelected: Switch (action) {case 'A': break; case 'B': break; case 'C': break;}},),],),Copy the code