Flutter: Everything is a Widget Series — Part 5: Scaffold

One of the main themes that quickly jump at you while using Flutter is that everything is a widget. The series aims to help beginners understand this simple yet powerful concept and introduce them to basic widgets in Flutter.

To help us in this journey, I built a Twitter App Mobile UI Clone using only the inbuilt widgets that come with Flutter. You can find the code at https://github.com/topeomot2/twitter-ui-app

Everything is Widgets Series

Part 4 was about the MaterialApp widget which makes available several other widgets that are required for material design applications.

There are somethings we expect from material design applications. They include AppBar, Drawer Menu, Options Menu, etc. Even though the MaterialApp gives us the widgets we need, how do we put it all together in such a way that it looks like a material design application?

AppBar and Drawer are widgets common to Material Design Applications

This is where the Scaffold widget comes in. Instead of starting afresh, the Scaffold gives you a layout structure that you can use for most material design applications.

According to the Flutter SDK

“Scaffold Widget Implements the basic material design visual layout structure.”

The code below shows the scaffold widget code in the twitter-ui-app.

class TwitterHomePage extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(...),
      body: Container(...),
      drawer: Drawer(...),
    );
  }

We used 3 properties of the Scaffold.

1. appBar: This allows us to add an AppBar Widget which will be placed correctly at the top of the screen.
2. body: The main content of your screen.
3. drawer: This gives you an easy way to add a Drawer to your screen. Just give this property a Drawer widget and you are done.

Other properties of the Scaffold widget can be seen in the constructor of the widget.

const 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,
  this.resizeToAvoidBottomInset,
  this.primary = true,
  this.drawerDragStartBehavior = DragStartBehavior.start,
  this.extendBody = false,
  this.drawerScrimColor,
  this.drawerEdgeDragWidth,
})

The MaterialApp gives us Widgets while the Scaffold gives us structure. Usually but not compulsory, the Scaffold is the next immediate child of a MaterialApp Widget.

The Scaffold speeds up development because it gives us access to structure on which our material design applications can be built on.