> For the complete documentation index, see [llms.txt](https://flutteropen.gitbook.io/flutter-widgets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flutteropen.gitbook.io/flutter-widgets/flutter-open-flutter-widgets-08-flutter-scaffold.md). # Widgets 08 | Scaffold ## Before Start The Scaffold is so important to use in the flutter and I use it so frequently. So we must know how to use it in the right way. We have used this for all of our pages. It is a widget that used to contain our other widget. So let's look at a sample use. ```dart import "package:flutter/material.dart"; import 'package:flutter_widgets/const/_const.dart'; class ScaffoldPage extends StatefulWidget { @override _ScaffoldState createState() => _ScaffoldState(); } class _ScaffoldState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(PageName.SCAFFOLD), ), body: Container( alignment: Alignment.center, constraints: BoxConstraints.expand(height: 50), color: RED, child: Text( "body", style: TextStyle(fontSize: 30, color: Colors.white), ), ), ); } } ``` We have used the `appBar`, the `body` is a `Widget`, you can use whatever widget you want. We just use the `Container` to show a `Text`. So it will show as follows. ![](/files/-LWoheHpyu2tE2SiGaSN) ## Constructor So before we start our tutorial we should know the constructor of the `Scaffold`. ```dart Scaffold({ Key key, this.appBar, this.body, this.floatingActionButton, this.floatingActionButtonLocation, this.floatingActionButtonAnimator, this.persistentFooterButtons, this.drawer, this.endDrawer, this.bottomNavigationBar, this.bottomSheet, this.backgroundColor, this.resizeToAvoidBottomPadding = true, this.primary = true, }) ``` ## floatingActionButton This will show a button at the bottom of the screen. You can custom your own `Widget`, but usually, you can use the `FloatingActionButton`. Let's look at the code as follows. ```dart floatingActionButton: Container( height: 100, width: 100, child: FloatingActionButton( onPressed: () { print("click floating"); }, child: Text( "Refresh", style: TextStyle(fontSize: 20), ), ), ) ``` ![](/files/-LWok_ZXDcX_V_vb8dLA) If you want the button to show in the bottom-center, you can change the `floatingActionButtonLocation` to `FloatingActionButtonLocation.centerFloat`.It is easy, other location will retain to you as an exercise. ```dart floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, ``` ![](/files/-LWolgNmejAd0Eup3pT7) The `floatingActionButtonAnimator` will change the animation of this button. This is about the animation, I will tell you in the animation part in the next time. ## persistentFooterButtons If you set this parameter, it will show these widgets at the bottom of the `Scaffold`. You need to know that this parameter is a `List`. Let's look at the code as below. ```dart persistentFooterButtons: [ RaisedButton( onPressed: () {}, color: BLUE, child: Icon( Icons.add, color: Colors.white, ), ), RaisedButton( onPressed: () { }, color: RED, child: Icon( Icons.clear, color: Colors.white, ), ), ], ``` The `persistentFooterButtons` part will show below the `floatingButton`part. ![](/files/-LWoohynhc110DJu9d5S) ## drawer This parameter will draw a drawer in the left of the screen. When you click the menu on the left, I will show a drawer to you. Usually, we put a `Drawer` widget here, if you want to put other widgets here, it doesn't matter, but you should custom your own drawer. So let's look at the constructor of the `Drawer` to see how to use it. ```dart const Drawer({ Key key, this.elevation = 16.0, this.child, this.semanticLabel, }) ``` We know the `elevation` controls the shadow of the widget, the child is a common widget. The `semanticLabel` is told before. It is just a string to describe the widget, often with voice. So let's use it. ```dart Widget _drawer() => Drawer( child: Column( children: [ AppBar( title: Text("Articles"), automaticallyImplyLeading: false, backgroundColor: RED_LIGHT, elevation: 0, ), Container( alignment: Alignment.centerLeft, padding: EdgeInsets.only(left: 20), constraints: BoxConstraints.expand(height: 80), child: Text( "This is my first article.", style: TextStyle(fontSize: 20), ), ), Divider( height: 0, color: TEXT_BLACK, ), Container( alignment: Alignment.centerLeft, padding: EdgeInsets.only(left: 20), constraints: BoxConstraints.expand(height: 80), child: Text( "This is my second article.", style: TextStyle(fontSize: 20), ), ), Divider( height: 0, color: TEXT_BLACK, ), Container( alignment: Alignment.centerLeft, padding: EdgeInsets.only(left: 20), constraints: BoxConstraints.expand(height: 80), child: Text( "This is my third article.", style: TextStyle(fontSize: 20), ), ), Divider( height: 0, color: TEXT_BLACK, ), Container( alignment: Alignment.centerLeft, padding: EdgeInsets.only(left: 20), constraints: BoxConstraints.expand(height: 80), child: Text( "This is my forth article.", style: TextStyle(fontSize: 20), ), ), Divider( height: 0, color: TEXT_BLACK, ), Container( alignment: Alignment.centerLeft, padding: EdgeInsets.only(left: 20), constraints: BoxConstraints.expand(height: 80), child: Text( "This is my fifth article.", style: TextStyle(fontSize: 20), ), ), Divider( height: 0, color: TEXT_BLACK, ), Container( alignment: Alignment.centerLeft, padding: EdgeInsets.only(left: 20), constraints: BoxConstraints.expand(height: 80), child: Text( "This is my sixth article.", style: TextStyle(fontSize: 20), ), ), Divider( height: 0, color: TEXT_BLACK, ), Container( alignment: Alignment.centerLeft, padding: EdgeInsets.only(left: 20), constraints: BoxConstraints.expand(height: 80), child: Text( "This is my seventh article.", style: TextStyle(fontSize: 20), ), ), Divider( height: 0, color: TEXT_BLACK, ), ], ), ); ``` ![](/files/-LWousmStISQBTcOBNxU) We click the menu widget to show the drawer, but if we want to show by our custom button, what can we do? there are two choice to do. #### 1. Use the key So we can define a key to the `Scaffold`. ```dart GlobalKey _scaffoldKey = new GlobalKey(); ``` And set the key. ```dart Scaffold( key: _scaffoldKey, //other codes. ) ``` In the part of the `persistentFooterButtons`, we have two buttons, we call the `openDrawer` function in the first one. ```dart RaisedButton( onPressed: () { _scaffoldKey.currentState.openDrawer(); }, color: BLUE, child: Icon( Icons.add, color: Colors.white, ), ), ``` So, when we click the first one button, it will show the drawer. #### 2. Use the We can make a Builder to surround a Button. ```dart Builder( builder: (context) => RaisedButton( onPressed: () { Scaffold.of(context).openDrawer(); }, color: BLUE_DEEP, child: Icon( Icons.forward, color: Colors.white, ), ), ), ``` It will show as below, when you click the `plus` and `forward`. it will show the drawer. ![](/files/-LWoz68oli1MrmDUIxCc) The **`endDrawer`** is the same but with different direction and location. So I do not give the example. ## bottomNavigationBar This is very common in our real app.It shows that it is a widget, but usually, we use the `BottomNavigationBar`. It will show them at the bottom of the screen to switch different pages. ```dart Widget _bottomBar() => BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text( "Home", style: TextStyle(fontSize: 20), )), BottomNavigationBarItem( icon: Icon(Icons.linked_camera), title: Text( "Capture", style: TextStyle(fontSize: 20), )), ], onTap: (index) { setState(() { _index = index; }); }, currentIndex: _index, fixedColor: RED, iconSize: 40, ); ``` ![](/files/-LWp1BPaZ65XbyupNv3e) ## bottomSheet This is a dialog shown at the bottom of the screen, but above the `bottomNavigationBar` and `persistentFooterButtons`. You can use `BottomSheet` directly as follows. ```dart Widget _bottomBar() => BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text( "Home", style: TextStyle(fontSize: 20), )), BottomNavigationBarItem( icon: Icon(Icons.linked_camera), title: Text( "Capture", style: TextStyle(fontSize: 20), )), ], onTap: (index) { setState(() { _index = index; }); }, currentIndex: _index, fixedColor: RED, iconSize: 40, ); ``` If you use like the `bottomSheet: _bottomSheet()`,It will show as follows. ![](/files/-LWp4RXbiLyzuz7DDHpW) Also, you can call it initiative.But be careful, if you want to use these code below, you should close the bottom before.Then call the function. ```dart _scaffoldKey.currentState .showBottomSheet((context) => _bottomSheet()); ``` ## backgroundColor & primary The `backgroundColor` is easy. Just change its background color. The primary parameter will make the padding-top of the `Scaffold` with the status bar to be zero. When set the `primary = false`, the screen will scroll up. Let's see the code and see the effect. ```dart backgroundColor: PURPLE, primary: false ``` ![](/files/-LWp8Yi4OyDZwOAAsN5_) ## Conclusion Today, we have learned the Scaffold, this is a very important widget. There are some widgets, such as the `Drawer`,`BottomNavigationBar`,`BottomSheet`,`FloatingActionButton`,`AppBar`,`persistentFooterButtons` to construct our Scaffold.Hope you have learned how to use them. Thanks for your reading! The end. #### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. | Facebook Page | Twitter | GitHub | QQ Group | | ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------- | | [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | 963828159 | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://flutteropen.gitbook.io/flutter-widgets/flutter-open-flutter-widgets-08-flutter-scaffold.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.