The Scaffold of Flutter is simple and profound

Scaffold is introduced

Scaffolding is commonly known as scaffolding. In the previous article, we said that the Material component (MDC) helps developers implement Material Design. That Scaffold provides the basic Material Design layout structure. The various layout elements on a single interface defined in the Material design are supported in Scaffold.

When is scaffolding used

Scaffold is almost always needed in every page, except when your page does not need the navigation area, but you still want to use that Scaffold as the top-level component of every page.

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

Scaffold properties and description

There are 23 attributes

field	attribute	describe
appBar	PreferredSizeWidget	Displays the top navigation area of scaffolding
body	Widget	Display the main contents of scaffolding
floatingActionButton	Widget	Hover button, located in the lower right corner
floatingActionButtonLocation	FloatingActionButtonLocation	Determines the position of the hover button
floatingActionButtonAnimator	FloatingActionButtonAnimator	Determines the animation of the hover button
persistentFooterButtons	List	A set of buttons displayed at the base of a scaffold
drawer	Widget	Left drawer menu component
onDrawerChanged	DrawerCallback	Left drawer menu changes event callback
endDrawer	Widget	Right drawer menu component
onEndDrawerChanged	DrawerCallback	Right drawer menu changes event callback
bottomNavigationBar	Widget	Bottom navigation bar
bottomSheet	Widget	A control that persists below the body and above the bottom control
backgroundColor	Color	Scaffolding background color
resizeToAvoidBottomInset	bool	Prevent component duplication
primary	bool	Whether the scaffolding extends to the top
drawerDragStartBehavior	DragStartBehavior	Detects gesture behavior, used in conjunction with drawers
extendBody	bool	Whether to extend to the bottom
extendBodyBehindAppBar	bool	Whether or not to extend to the top, used for translucent, ground-glass effect of the main control property
drawerScrimColor	Color	Color of the main page of the unmasked layer when the sidebar pops up
drawerEdgeDragWidth	double	Width of the unmasked layer when the sidebar pops up
drawerEnableOpenDragGesture	bool	Whether the left drawer supports gesture sliding
endDrawerEnableOpenDragGesture	bool	Whether the right drawer supports gesture sliding
restorationId	String	State restore identifier

Scaffold properties are used in detail

1, appBar

Displays the top navigation bar for scaffolding

Method of use

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),),);Copy the code

2, the body

Display the main contents of scaffolding

Method of use

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),),);Copy the code

3, floatingActionButton

Hover button, default is located in the small right corner

Method of use

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
   		print("add");
    },
    child: Icon(Icons.add)
  ),
);
Copy the code

4, floatingActionButtonLocation

Determines the position of the hover button

Method of use

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
   		print("add");
    },
    child: Icon(Icons.add)
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,
);
Copy the code

5, floatingActionButtonAnimator

Determines the animation of the hover button

Method of use

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
   		print("add");
    },
    child: Icon(Icons.add)
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,
  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
);
Copy the code

6, persistentFooterButtons

A set of buttons displayed at the base of a scaffold

Method of use

Scaffold(
  appBar: AppBar(
  	title: Text("Scaffold"),
  ),
  body: Center(
  	child: Text("body"),
  ),
	persistentFooterButtons: [
    TextButton(onPressed: (){}, child: Text("Text1")),
    TextButton(onPressed: (){}, child: Text("Text2")),,);Copy the code

7, the drawer

The Scaffold’s left drawer menu component can be customized by setting the controller key to open the sidebar manually. The code is shown below

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),));Copy the code

8 onDrawerChanged.

Left drawer menu changes event callback

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  onDrawerChanged: (isOpen) {
  	print(isOpen); });Copy the code

9 endDrawer.

Right drawer menu component that functions like a drawer except that one is on the left and one is on the right.

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	endDrawer: Drawer(
  	child: Center(child: Text("draw"),),),);Copy the code

10, onEndDrawerChanged

The right drawer menu changes the event callback and is used in the same way as onDrawerChanged.

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	endDrawer: Drawer(
  	child: Center(child: Text("draw"),),
  ),
  onEndDrawerChanged: (isOpen) {
    print(isOpen); });Copy the code

11, bottomNavigationBar

Bottom navigation bar, often used to switch the bottom item

Method of use

  int _currentIndex = 0;
  List<Widget> _pages = [
    Center(child: Text("tab1"),),
    Center(child: Text("tab2"),)]; Scaffold( appBar: AppBar( title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        label: "tab1",
        icon: Icon(Icons.settings)
      ),
      BottomNavigationBarItem(
        label: "tab2", icon: Icon(Icons.settings) ) ], currentIndex: _currentIndex, onTap: (currentIndex) { setState(() { _currentIndex = currentIndex; }); },),);Copy the code

12, bottomSheet

A control that persists below the body and above the bottom control

Method of use

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	bottomSheet: Container(child: Row(
    children: [
      Expanded(child: TextField()),
      ElevatedButton(onPressed: (){}, child: Text("Send"))],)));Copy the code

13, backgroundColor

Scaffolding background color

Method of use

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	backgroundColor: Colors.pink,
);
Copy the code

14, resizeToAvoidBottomInset

Prevents component duplication, blocking components when the keyboard bounces up. This value is set to true to prevent keyboard occlusion

Method of use

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	resizeToAvoidBottomInset: true,);Copy the code

15, the primary

Whether the scaffolding extends to the top

Method of use

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	primary: true,);Copy the code

16, drawerDragStartBehavior

Drag behavior. Used in conjunction with drawers, the drag behavior for opening and closing drawers begins when a drag gesture is detected. If set to dragStartBehavior.down, it starts when a Down event is first detected. If you use dragStartBehavior.down when dragging back, there is an obvious lag. Dragstartbehavior.start is recommended

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerDragStartBehavior: DragStartBehavior.start
);
Copy the code

17, extendBody

Whether to extend to the bottom, mainly used for translucent effect.

Method of use

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	extendBody: true,);Copy the code

In the 18th and extendBodyBehindAppBar

Whether or not to extend to the top, used for translucent, ground-glass effect of the main control property

Method of use

Scaffold(
  appBar: AppBar(
    title: Text("Scaffold"),
  ),
  body: _pages[_currentIndex],
	extendBodyBehindAppBar: true,);Copy the code

19, drawerScrimColor

Color of the main page of the unmasked layer when the sidebar pops up

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
  	title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
  	child: Text("body"),
  ),
	drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
);
Copy the code

20, drawerEdgeDragWidth

The width of the unmasked layer when the sidebar pops up. If the slide distance is less than this value, the masked layer pops up. The default value is 20

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
  drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
  drawerEdgeDragWidth: 100,);Copy the code

21, drawerEnableOpenDragGesture

Does the left drawer support gesture sliding? If set to false, it will not slide out by gesture sliding. Default: true

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
  drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
  drawerEnableOpenDragGesture: false,);Copy the code

22, endDrawerEnableOpenDragGesture

Does the right drawer support gesture sliding? If set to false, it will not slide out by gesture sliding. Default: true

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
  drawer: Drawer(
    child: Center(child: Text("draw"),),
  ),
  drawerScrimColor: Colors.green,
  drawerEnableOpenDragGesture: false,
  endDrawerEnableOpenDragGesture: false,);Copy the code

23, restorationId

State restore identifier

Method of use

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text("Scaffold"),
    leading: IconButton(onPressed: (){
      _scaffoldKey.currentState.openDrawer();
    }, icon: Icon(Icons.menu_open)),
  ),
  body: Center(
    child: Text("body"),
  ),
	restorationId: "scaffold"
);
Copy the code

conclusion

These are all the scaffolds that can be used. The most commonly used properties are appBar and Body. The other properties are used in specific situations.