Widgets 08 | Scaffold

In this tutorial, I will tell you how to use the Scaffold and more in the flutter.

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.

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.

Constructor

So before we start our tutorial we should know the constructor of the Scaffold.

 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.

floatingActionButton: Container(
          height: 100,
          width: 100,
          child: FloatingActionButton(
            onPressed: () {
              print("click floating");
            },
            child: Text(
              "Refresh",
              style: TextStyle(fontSize: 20),
            ),
          ),
        )

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.

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

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.

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

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.

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.

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

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.

  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

And set the key.

Scaffold(
      key: _scaffoldKey,
      //other codes.
)

In the part of the persistentFooterButtons, we have two buttons, we call the openDrawer function in the first one.

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.

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.

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.

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

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.

  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.

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.

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

backgroundColor: PURPLE,
primary: false

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,star to support.

Facebook Page	Twitter	GitHub	QQ Group
Flutter Open	NieBin	NieBin	963828159