Scaffold Flutter with Example – Awesome Flutter Widget

Scaffold in Flutter – Creating Activities & Fragments

Scaffold in Flutter is a very useful and highly flexible class. In Flutter, Scaffold implements the basic material design layout structure. The developer can implement a wide range of widgets using Scaffold as the Parent Widget. In this tutorial, we will see how to create a Scaffold and also see some of the most useful Constructors.

Scaffold, like the name suggests, creates a visual scaffold for material design widget. In order to implement a Scaffold in Flutter, there is some additional information required to be known.

Flutter Basics

Before we jump on to create a scaffold widget, we will understand how the Scaffold creates a visually better Material design standard layout in a matter of seconds. See the below image for better understanding of what the Scaffold Widget offers.

Scaffold in Flutter
Scaffold in Flutter

As an Android developer, we use activities for single screen representation which consists of many views like toolbar, menus, drawer, bottom navigation bar, snack bar, float action button etc. All of this can be flexibly added using a Scaffold.

Flutter Consists of a lot of Widgets(Flutter is all about widgets only), Scaffold, in particular, handles the following Widgets in it. That is, it is capable of packing all the widgets into it. They are,

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

Scaffold Class Properties

To know more about Widgets that Scaffold has to offer, we will see some of the important properties of the Scaffold class.

appBar – PreferredSizeWidget

An app bar to display at the top of the scaffold. Example AppBar is given below,

backgroundColor – Color

The color of the Material widget that underlies the entire Scaffold. This is a sample Background Color attribute like any other widget. An example of that is given below

body  – Widget

The primary content of the scaffold. We can create any widget to be held here. A sample is provided in the application example in the next section.

bottomNavigationBar – Widget

A bottom navigation bar to display at the bottom of the scaffold.  BottomNavigationBar is used to provide a Navigation-like bar in the bottom of the App. A sample is given below, it is a quite tedious process to create in Android, however, Flutter API’s make is really easy to do so.

bottomSheet – Widget

The persistent bottom sheet to display.  BottomSheet is also a widget that is similar to that of a NavigationBar except a persistent bottom sheet shows information that supplements the primary content of the app. A persistent bottom sheet remains visible even when the user interacts with other parts of the app holds. A sample is given below.

drawer – Widget

A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from either left-to-right or right-to-left. This is similar to the Sliding-drawers that are famous with Android’s Material design. The creation of a Sliding drawer is quite tedious with Android, however, Flutter has made it extremely easy to create one. A sample is given in the example in the next section.

floatingActionButton- Widget

A button displayed floating above the body, in the bottom right corner. FloatingActionButton is similar to the one that Android has. It is quite useful and simple to create in Flutter. A sample is given below.

persistentFooterButtons – List<Widget>

A set of buttons that are displayed at the bottom of the scaffold. This is a collection of FloatingActionButtons that are present in the bottom of the Application. When used properly, it can be very useful.

Note: The following section assumes that you already have Flutter setup for your system and Android Studio IDE is installed with Flutter plugin. 

Scaffold in Flutter – Important Widget

Scaffold Class also can take in the following Widget Attributes. You can create a simple yet effective activity like UI in a matter of minutes by using the following Widgets.

AppBar

To create an AppBar in Flutter, all you need to do is make a call to the classAppBar. The constructor is called and in turn, the required properties are initialized. Below is a sample Scaffold holding the AppBar property.

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(title: Text('Androidmonks'),),
    ),
  ));
}

This is going to generate an AppBar that looks like

Flutter Application - AppBar
Flutter Application – AppBar

We can further enhance the AppBar by adding additional Properties like Color, elevation, textTheme, title etc. Some of the properties are added and the AppBar now looks like

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
    ),
  ));
}
Scaffold AppBar Background Color Property
Scaffold AppBar Background Color Property

Floating Action Button

A floating action button is a circular icon button which is displayed all the time and is generally meant for promoting a primary or most widely used action on the screen.

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

Use at most a single floating action button per screen. Floating action buttons should be used for positive actions such as “create”, “share”, or “navigate”.

If the onPressed callback is null, then the button will be disabled and will not react to touch.

To create the FloatingActionButton, we will be making use of the floatingActionButton field and inturn calling the FloatingActionButton class. See a sample Example Layout below,

Adding on to the already created code from the above section, we now have

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(onPressed: null,child: Text('Press'),),
    ),
  ));
}
Sample Layout with the FloatingActionButton
Sample Layout with the FloatingActionButton

Additionally, the floatingActionButton attribute is added, and the onPressed and child attribute is its required constructors.

If the onPressed is Null, the button is disabled and no action is performed. This way, we create a simple Button that can direct the user to perform an Action.

The main purpose of a floatingActionButton is to,

  1. The button if used along with Images/Icons prompts the user to take action
  2. Quick/Common Action can be taken by the user without unwanted buttons hanging everywhere.

The Material Design of the UI is a major reason for Flutter’s success and the FloatingActionButton is a very good example of that.

Additionally, FloatingActionButton can also include properties like backgroundColor, shape, mini, toolTip etc. To match our AppBar and the FloatingActionButton, we will change the BackgroundColor of the FloatingActionButton as well like below.

On changing the backgroundColor property we get,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.orangeAccent,onPressed: null,child: Text('Press'),),
    ),
  ));
}

becomes,

Changing the backgroundColor of the FloatingActionButton
Changing the backgroundColor of the FloatingActionButton

Bottom Navigation Bar

As the name suggests, the bottom navigation bar, just like the AppBar is a horizontal strip at the bottom of the screen. It can have multiple items and can use text labels, icons or a combination of both

The bottom navigation bar is generally created for displaying messages as well as for providing page specific shortcut actions.

If you are familiar with Android’s Fragments, the Bottom Bar is created through a Series of Layouts stacked one after another and the switching between the Fragments required Adapters and lot of redundant time taking the code to write. All of this is Made extremely simple by using the BottonNavigationBar attribute.

To make use of the bottomNavigationBar, you can call the classBottomAppBar on it and create your Bottom Bar. To know how the BottomAppBar is created, check the Code example below.

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.orangeAccent,onPressed: null,child: Text('Press'),),
      bottomNavigationBar:BottomAppBar(child: Text('Bottom bar'),),
    ),
  ));
}

This creates a very simple Bottom Bar like,

Creating a Simple Bottom Bar
Creating a Simple Bottom Bar

In order to create a Fragment Like BottomNavigationBar, we have to make use of the classBottomNavigationBar. The Class requires the attribute items for which, a list of BottomNavigationBarItem classes is given. To know more about this, see the code example below.

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.orangeAccent,onPressed: null,child: Text('Press'),),
      bottomNavigationBar:new BottomNavigationBar(fixedColor: Colors.orangeAccent,items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.home),
          title: new Text("Home"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.comment),
          title: new Text("Comments"),
        )
      ]),

    ),
  ));
}

The application layout now looks like,

BottomNavigationBarItem
BottomNavigationBarItem class usage

Persistent Footer Buttons

Persistent Footer Buttons attribute creates a simple FooterButton that persists even if the Scaffold scrolls. This way, the buttons can be used to present any important action to be performed across pages.

The persistentFooterButton attributes take List of widgets as its value and can hold any number of buttons inside it. The attribute, however, doesn’t contain any other properties like color or background color etc.

In order to create a PersistentButton, remember that, it will be placed just above the BottomNavigationBar and below the Body of the scaffold.

To see a sample, find the example code snippet below,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.orangeAccent,onPressed: null,child: Text('Press'),),
      bottomNavigationBar:new BottomNavigationBar(fixedColor: Colors.orangeAccent,items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.home),
          title: new Text("Home"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.comment),
          title: new Text("Comments"),
        )
      ]),
      persistentFooterButtons: <Widget>[new Text('Sample Persistent Footer')],
    ),
  ));
}

Once the persistenFooterButtons are created, you can find how it looks,

PersistentFooterButton
PersistentFooterButton

It is important to note here that, the persistentfooterbutton as such does not hold any other property like we saw above, it is going to take the background color as that of the Scaffold. You can, however, include Icons into this persistentFooterButton. It looks like below,

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.orangeAccent,onPressed: null,child: Text('Press'),),
      bottomNavigationBar:new BottomNavigationBar(fixedColor: Colors.orangeAccent,items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.home),
          title: new Text("Home"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.comment),
          title: new Text("Comments"),
        )
      ]),
      persistentFooterButtons: <Widget>[new Text('Sample Persistent Footer'),
      new Icon(Icons.airline_seat_flat),],
    ),
  ));
}
Additional Icon is added to the persistentFooterButtons
Additional Icon is added to the persistentFooterButtons

Drawer

Scaffold widget is incomplete without adding the Drawer attribute to it. This attribute creates a sliding-drawer panel like Android(Deprecated now, but find the post on Alternatives to Sliding Drawer Panel in Android post to understand how different Sliding Drawer like UI’s are present). The main objective of a Drawer is to create a Menu Bar like flow for the user to engage with.

This improves arranging the elements in their respective places and improves UI dimension. The Drawer widget is extremely simple to create. Unlike, the tedious process of creating a Menu item, everytime from scratch, the Drawer Widgets takes care of creating the external Skeleton for the developer.

To make use of the property, just call the Drawer class. It is also important to note that, there will be the use of ListView widget in order to create the List of Menu Items.

The drawer property in Scaffold automatically creates a Menu Icon in the AppBar. This is important because there is no requirement to position the Menu Buttons depending on the ScreenSize unnecessarily.

Follow the Code snippet below to know more about the Drawer Property in Scaffold.

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.orangeAccent,onPressed: null,child: Text('Press'),),
      bottomNavigationBar:new BottomNavigationBar(fixedColor: Colors.orangeAccent,items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.home),
          title: new Text("Home"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.comment),
          title: new Text("Comments"),
        )
      ]),
      persistentFooterButtons: <Widget>[new Text('Sample Persistent Footer'),
      new Icon(Icons.airline_seat_flat),],
      drawer: Drawer(child: ListView(
        children: <Widget>[
          new DrawerHeader(child: Text('Head of Menu'),
          decoration: BoxDecoration(
            color: Colors.orangeAccent
              ),
            ),
          Text('Menu Item 1'),
          Text('Menu Item 2')
          ],
        ),
      ),
    ),
  ));
}

Like we discussed, the use of ListView is important because we will be requiring a List of Items on the Drawer.

The ListView additionally creates a DrawerHeader which provides a Header like space in the Menu List. See the output of this final Drawer Layout below.

Drawer Layout
Drawer Layout

Scaffold in Flutter – Example Application

Final Example Application after adding all the Widgets to the Scaffold looks like below,

Modifying some elements, here and there to create a complete application. The following application is created from the same.

We additionally add some body content to the App and the Scaffold is formed. The final code snippet for the Application is as given below.

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'AndroidMonks',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Androidmonks'),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.orangeAccent,onPressed: null,child: Text('Press'),),
      body: Container(child: ListView(children: <Widget>[
        Text('Body Content 1',style: TextStyle(fontStyle: FontStyle.italic),),
        Text('Body Content 2',style: TextStyle(fontStyle: FontStyle.italic),)
      ],),),
      bottomNavigationBar:new BottomNavigationBar(fixedColor: Colors.orangeAccent,items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.home),
          title: new Text("Home"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.comment),
          title: new Text("Comments"),
        )
      ]),
      persistentFooterButtons: <Widget>[new Text('Sample Persistent Footer'),
      new Icon(Icons.airline_seat_flat),],
      drawer: Drawer(child: ListView(
        children: <Widget>[
          new DrawerHeader(child: Icon(Icons.account_box,size: 90,),
          decoration: BoxDecoration(
            color: Colors.orangeAccent
              ),
            ),
          Text('Menu Item 1'),
          Text('Menu Item 2')
          ],
        ),
      ),
    ),
  ));
}

With these few lines of code, we create the application like below,

Flutter App final App using Scaffold
Flutter App final App using Scaffold

That’s it for this post on using Scaffold in Flutter. To know more about the Layouts, Widgets that are present in Flutter, follow this space for more content.

“Learn and Be Curious”

Leave a Comment

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