Skip to content

What is a Scaffold in Flutter?

When I first got started with Flutter, naturally I spent a lot of time going over tutorials and code samples at the official Flutter docs. Most of these beginner tutorials make use of the MaterialApp class as the main “backbone” of an example app but as I started learning Flutter and looking at more real-world code examples, I started to notice heavy use of the Scaffold class. But what is a Scaffold in Flutter?

To put it simply, using the Scaffold class is a shortcut way to set up the familiar Material Design look in your app so that you don’t have to build individual visual elements manually. This saves you from having to write boilerplate code and helps ensure a consistent Material Design look and feel.

Here is what a basic Material Design app layout looks like:

Basic Material Design app layout

At the top (1) you have an AppBar with a title, followed by the body (2) that has a Text in it, followed by a FloatingActionButton (3) that has been centered onto the BottomAppBar (4).

Wouldn’t it be tedious and boring every time you create a new app to have to manually create an AppBar instance of a certain height and define exactly where to place it on screen? Or worse, have to implement an AppBar-like widget from scratch that looks and behaves familiarly. Now imagine having to do this with every other Material Design visual component you need in your app.

Scaffold makes all of this setup easy, which saves a ton of time and effort. Here’s the code that renders the layout above:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Center(
        child: Text('You have pressed the button $_count times.'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

As you can see, the Flutter team has created classes for commonly-used Material Design visual components (here you see AppBar, BottomAppBar, and FloatingActionButton, but there are many more such as BottomNavigationBar and Drawer) and all you have to do is set them up in-line and assign them to Scaffold class properties.

Flutter Scaffold is like hitting the Easy button

For a list of all the Material Design widgets built-in to Flutter, see here. And if you’re trying to get started in Flutter but are running into setup issues, perhaps my previous Flutter post will help you.

Published inTips & Tricks

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *