# 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<ScaffoldPage> {

  @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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWoheHpyu2tE2SiGaSN%2Fscaffold-01.png?alt=media\&token=17ae3697-be0b-46cd-8cb4-8c1a7409484b)

## 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),
            ),
          ),
        )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWok_ZXDcX_V_vb8dLA%2Fscaffold-02.png?alt=media\&token=53c03ef3-3a72-446b-87ae-2d7afa71426a)

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.&#x20;

```dart
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWolgNmejAd0Eup3pT7%2Fscaffold-03.png?alt=media\&token=89b2328e-ea37-4df4-9642-1cfbc2cebe22)

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.&#x20;

## 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: <Widget>[
        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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWoohynhc110DJu9d5S%2Fscaffold-04.png?alt=media\&token=7088f8f8-c06d-4b0f-b301-5df932957dff)

## 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: <Widget>[
            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,
            ),
          ],
        ),
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWousmStISQBTcOBNxU%2Fscaffold-05.png?alt=media\&token=7d49b1e1-69b9-4fa4-9727-752ed2ccec32)

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<ScaffoldState> _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.&#x20;

```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&#x20;

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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWoz68oli1MrmDUIxCc%2Fscaffold-06.png?alt=media\&token=951060a4-8081-454e-ade1-356c882a12cd)

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,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWp1BPaZ65XbyupNv3e%2Fscaffold-07.png?alt=media\&token=072bd58a-18eb-4578-a7fd-87c5110a6d11)

## 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWp4RXbiLyzuz7DDHpW%2Fscaffold-08.png?alt=media\&token=2b33a1c4-662b-40a6-9f7a-c3498470fdd8)

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&#x20;

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
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWo_mX_WX0ApQa-o__z%2F-LWp8Yi4OyDZwOAAsN5_%2Fscaffold-09.png?alt=media\&token=e74fa9ed-0746-4018-a19c-1f52e0e22364)

## 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. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

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

&#x20;