concept Scaffold in category flutter

This is an excerpt from Manning's book Flutter in Action. Login to get full access to this book.

Layout—Row, Column, Scaffold, Stack

Like the MaterialApp widget, Scaffold is a convenience widget that’s designed to make applications (that follow Material guidelines) as easy as possible to build. The MaterialApp widget provides configuration and functionality to your app. Scaffold is the widget that gives your app structure. You can think of MaterialApp as the plumbing and electricity of your app, while Scaffold is the foundation and walls.

Like MaterialApp, Scaffold (figure 4.2) provides functionality that you’d otherwise have to write yourself. Again, even if you have highly custom design style, and it’s not Material at all, you’ll want to use Scaffold. Per the Flutter docs, Scaffold defines the “basic Material Design visual layout,” which means it can make your app look like this pretty easily.

Figure 4.2. Diagram of the most important Scaffold widget properties

The Scaffold widget provides many optional features, all of which you configure from the constructor. Here’s the constructor method for the Scaffold class.

Listing 4.7. Scaffold full property list

// From Flutter source code. Scaffold constructor.
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 = true,
    this.primary = true,
  }) : assert(primary != null), super(key: key);

copy

I wanted to show this so you can see that none of these properties are marked as @required. You can use an AppBar, but you don’t have to. The same is true for drawers, navigation bars, and so on. For this app, I only used AppBar. The point is, again, that even if you’re building an app that you don’t want to look “Material,” the Scaffold widget is valuable and I recommend using it.

In the weather app, you can see the scaffold in the ForecastPage widget.^[2] It’s common for each of the different screens in your application to have its own Scaffold widget.

Flutter includes a ton of convenient, structural widgets, like MaterialApp, Scaffold, and AppBar. These widgets give you an incredible amount for free: navigation, menu drawers, theming, and more.