What is Scaffold?

Introduction

Hey there!👐🏿👐🏿👐🏿

How’s your flutter journey coming? I hope you’re taking the time to become a world-class developer.🤗

Today, I will be explaining the scaffold widget in Flutter. Scaffolds are present in mobile app development using Flutter and Dart. I don’t mean this in a literal way, but scaffolds are super necessary when building your UI using the Flutter SDK.

This article isn’t tailored for a specific audience because I feel these articles are crafted to explain technical terms to newbies and enthusiasts and give intermediate and advanced developers something to laugh/smile about as they take a shot of Edpresso -pun intended.

Let’s hop right in!

Concept discussion

When we talk about scaffolds in a room of laymenIn this case, people that don’t write Flutter and Dart, they could be mistaken for the scaffolding used for buildings. However, understanding the concepts of scaffolding in building and construction could help us to better understand scaffolds in Flutter.

According to Wikipedia, A scaffold “is a temporary structure used to support a work crew and materials to aid in the construction, maintenance, and repair of buildings, bridges, and all other man-made structures”.

In mobile application development with Flutter, the Scaffold class implements the basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

In simpler terms, scaffolds are like a structure defined by a framework (Flutter) that contains the basic elements needed to build a user interface(UI).

In a previous article, where we explained widgets in Flutter using a burger analogy, scaffold stood for a parent frame that holds a host of other elements used to build a mobile application.

The scaffold gives us the ability to create a general-purpose mobile application consisting of several individual parts:

• AppBar
• Body
• Floating Action Bar
• Bottom Navigation Bar
• Persistent Footer Buttons

When used together, these individual elements can be powerful for building and crafting functional yet aesthetically pleasing UI.

Scaffolds as a cake

I love to explain terms using food as I think that people relate to food more than building and construction.

So, I will relate scaffolds in Flutter to cake. When you bake, buy, or eat a cake, you (usually) have a variety of options to choose from, but taste, color, shape, and occasion all determine what cake you choose.

However, chefs and bakers know that certain basic ingredients are needed before all the fancy ingredients can come in. These ingredients are flour and water, which set a background for the eggs, baking powder, and flavors to come in. These “extra ingredients” allow the pastry chef to customize, style, and bake to suit the occasion.

The scaffold widget allows one to customize pages in an app by providing frame/base ingredients. After we declare the scaffold, we can tap into its API to utilize the other children widgets within.

The following image has three different cakes, looks, and (possibly) different tastes. The base ingredient provides a frame and accommodates other ingredients to suit each taste bud.

When building an app in Flutter, the scaffold widget is a base ingredient for building pages.

To call a scaffold, all you need to do is:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(backgroundColor: Colors.amber),
          body: Center(),
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.amber,
            child: Icon(Icons.play_arrow),
          ),
        ),
      ),
    );
  }
}

Conclusion

I hope this article has helped explain scaffolds in Flutter to you. It is important to understand the concept of scaffolds in Flutter so that you can use it to build amazing apps.

Please send me a DM on Twitter if you need me to explain the concepts to you better. I do have a metaphor that uses veggies!

Thank you for reading.

Ciao!