Flutter Scaffold Widget With Examples

Scaffold widget in Flutter is used to implement the basic material design visual layout structure. It occupies the whole available space in your app UI and provides you with several widgets that you can use for different purposes. In other words, Scaffold is mainly used to create the base of your app’s screen. It provides you with APIs to display different widgets including app bar, bottom navigation bar, floating action button, back button, snack bar, and so on. It actually save the time of manually building these widgets which is every developer’s dream, right?

To begin with, let’s first understand the basic layout of Scaffold widget then we’ll walk through each widget individually to learn how to use it effectively in your app.

 

 

The main 4 sections of the Flutter Scaffold layout are App bar, body, floating action button, and bottom navigation bar. Not to mention that it’s totally your choice to use all of them at the same time but keep in mind that the body section is a must.

As can be seen from the picture, app bar goes at the top section of the Scaffold section. Here is where you place your UI title, back button, and other needed buttons. Next, right below the app bar goes the body which covers the whole screen unless you add a bottom navigation bar which, as its name suggests, goes at the bottom of your UI. Body section contains your main UI content and that entirely depends on your app’s type. Finally, floating action button goes above the bottom navigation bar and is usually positioned at the right side.

Now that you know the basic structure of Flutter Scaffold class, it’s time to dive more into details and show off some examples.

App Bar

This is a horizontal app bar which is positioned at the most top of the scaffold. Actually, Flutter app bar is the main reason why you want to use Scaffold widget in your app. Within the app bar itself, there are multiple sections that you can use to utilize it completely and make the most out of it.
The sections of Scaffold app bar are mainly title, leading, and actions. Moreover, you can also add flexible space and bottom section to your app bar.

First, the leading section takes a widget as an argument and is usually an Icon button. In this section, the most reasonable Icon to use is the back button or a navigation menu. Then, the title section takes a Text as its argument and is used to display the title of the UI. Next, the bottom section is where you can place a tab bar while flexible space is a widget that you can place between the toolbar and the tab bar. Finally, the actions section takes a list of widgets as its argument where you can specify 1 or more Icon Button based on your app’s requirements. For example, you can place search icon, notification icon, etc.

Properties of Scaffold AppBar

within the Scaffold app bar, you can specify various properties to control its elements as well as its appearance. The app bar sections we discussed earlier are considered properties. Furthermore, the following are also properties of Scaffold AppBar:

• centerTitle: takes a boolean value to specify whether to center the app bar title or not.
• backgroundColor: specifies the scaffold app bar color.
• elevation: controls the size of the shadow below the app bar.
• brightness: specifies the brightness of the app bar materials.
• titleSpacing: specifies the spacing around the title section on the horizontal axis.
• shadowColor: specifies the color of the shadow below the app bar.

Example

appBar: AppBar(
  title: Text('Scaffold Widget'),
  centerTitle: true,
  backgroundColor: Colors.indigo,
  elevation: 10,
  //shadow
  titleSpacing: 10,
  //space between leading icon and title
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.notifications_none),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.search),
    )
  ],
)

Output

 

Body

Body is the minimum required property of the Scaffold widget in Flutter and it occupies the area below the app bar and behind the floating action button if it exists. In other words, body is the primary content of the Scaffold layout. Scaffold body takes only one argument which is a widget and is preferably a Flutter layout widget especially if you’re planning to have several views in your UI. In this example, we’ll be placing a simple content which is a centered text.

Example

body: Center(
  child: Text(
    'Hello World!',
    style: TextStyle(
        fontSize: 30, fontWeight: FontWeight.bold, color: Colors.indigo),
  ),
),

Output

 

Floating Action Button

A circular button that is displayed at the bottom right corner of the Scaffold layout right above the bottom navigation bar if it exists. It is mainly used to promote a primary action of the application such as message. It takes a widget as its only property and FloatingActionButton is the best widget to use in this case.
Floating Action Button has several properties including the following:

•  child: specifies what to be displayed inside the button. For example, you can place an Icon or simply a Text.
• onPressed: a method specifies what happens when the user clicks on the button.
• elevation: specifies the size of the shadow surrounding the floating button.
• hoverColor: specifies the color of the floating button when the user hovers on it.
• toolTip: text that describes the action of the button.
• backgroundColor: specifies the background color of the floating action button.
• foregroundColor: specifies the color of the button’s child widget. i.e. the color of the icon or the text.
• shape: the shape of the button.

Example

floatingActionButton: FloatingActionButton(
  elevation: 20,
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  child: Icon(
    Icons.message,
  ),
  onPressed: () {
    print('I am a floating action button');
  },
),

Output

 

Bottom Navigation Bar

Bottom navigation bar is like a menu that is displayed at the bottom of the Scaffold layout. Also, it takes a BottomNavigationBar widget where you can place several items including texts and icons. In addition Bottom Navigation Bar has several properties that you can make use of including:

• backgroundColor: specifies the background color of the navigation bar.
• selectedItemColor: specifies the color of the item selected.
• unselectedItemColor: specifies the color of the unselected items.
• elevation: specifies the size of the bottom navigation bar shadow.
• selectedFontSize: specifies the font size for the selected item label.
• unselectedFontSize: specifies the font size for the unselected items lebel.
• iconSize: specifies the size of the icons within the navigation bar.

Within the Bottom Navigation Bar, you can specify as many items as you want using the widget BottomNavigationBarItem. Each bottom navigation bar item takes different properties such as:

• icon: the icon of the item which the user selects.
• label: the label of the selected item.
• backgroundColor: the background color of this specific item
• activeIcon: an alternative icon that is displayed when this item within the navigation bar item which the user selects.
• tooltip: the description of the item displayed when the user long presses the navigation bar item.

Example

bottomNavigationBar: BottomNavigationBar(
  backgroundColor: Colors.indigo,
  selectedItemColor: Colors.blue[200],
  unselectedItemColor: Colors.white,
  elevation: 20,
  selectedFontSize: 16,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home, size: 30,), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.settings, size: 30,), label: 'Settings'),
  ],
)

Output

 

Drawer

a drawer in scaffold is a panel displayed on the side of the body when the user swipe left or right, i.e. right be default. I saved this widget to the end as it is one of my favorites. I personally consider it a creative way to build smarter applications with awesome UI design.
Furthermore, it takes a Drawer widget which takes several properties including the following:

• elevation: size of the drawer’s shadow
• child: a widget, usually a column
• backgroundColor: color of the drawer

Within the Drawer’s child, you can specify several items such as User account drawer header, list tile, divider, and so on.

• UserAccountDrawerHeader: you can use it to show a brief of the user’s details. For example, profile picture, name, email, etc. Within this property you can specify the following:
  • accountName
  • accountEmail
  • currentAccountPicture
• ListTile: a widget where you can specify the drawer’s items. It includes title and leading to show a text and an icon within the tile
• Divider: a widget to place a divider between the drawer’s items.

Example

drawer: Drawer(
  elevation: 16,
  child: Column(
  children: [
    UserAccountsDrawerHeader(
        accountName: Text('Dania\'s Blof'),
        accountEmail: Text('www.daniasblog.com'),
        currentAccountPicture: CircleAvatar(
          backgroundColor: Colors.white,
          child: Text('DB', ),
        ),
    ),
    ListTile(
      title: Text('Profile'),
      leading: Icon(Icons.face),
    ),
    Divider(
      height: 0.1,
    ),
    ListTile(
      title: Text('Wishlist'),
      leading: Icon(Icons.favorite),
    )
  ],
  ),
)

Output

Conclusion

And there you have it, a complete explanation of how to use Scaffold widget in your applications and get the most out of its built-in elements. Now that you know this, you’re all set up and ready to build more complex and creative apps by using one widget, YES do you believe it?!
Wanna learn more about Flutter? I have category called Flutter that’s ripe for you to explore. You can learn about Flutter widgets, layouts, and practice with a bunch of real examples. Also, don’t forget to subscribe to my blog to be one of the firsts to know about my newest posts!