Scaffold is a widget in Flutter that implements the basic material design visual layout structure. Scaffold provides APIs for showing drawers and bottom sheets.
In this material design related tutorial we’ll learn everything about Scaffold.
What is Scaffold? How and why we should use it to make a Flutter app complete.
Considering the visual aspect of a Mobile device, or Tab we should remember that the screen size varies from device to device.
The first job of Scaffold is to expand and fill the available space. The Scaffold widget fills entire window or device screen.
Subsequently, when the keyboard appears the Scaffold’s ancestor MediaQuery widget’s MediaQueryData.viewInsets changes and the Scaffold will be rebuilt.
The Scaffold’s body is resized to make room for the keyboard. In addition, there are areas that might not be completely visible. The MediaQueryData.padding value defines that area.
Therefore the Scaffold widget can control from top to bottom of the screen including the invisible areas. At the top, there is an an appBar and at the bottom there is bottomNavigationBar.
We’ll see how they work in a minute.
In this introductory note, to sum up, we can say that Scaffold is mainly responsible for creating a base. And on that base the app screen appears.
Next, on that app screen various child widgets hold on and render on the screen.
At the same time Scaffold provides many widgets or APIs for showing Drawer, SnackBar, BottomNavigationBar, AppBar, FloatingActionButton, and many more.
To start with, we’ll describe Scaffold properties part by part. As a result, the code snippet may look incomplete. Although finally we’ll give the full code snippet at the end, still you may get the full code at this GitHub Repository.
Why scaffold is used in Flutter?
As we have said earlier, scaffold is used to implement the basic material design visual layout structure. Moreover, Scaffold contains almost everything we need to create a functional and responsive flutter app.
Let’s start with AppBar.
How does it look like?
The AppBar is a horizontal bar at the top of the Scaffold widget.
The Scaffold widget starts with AppBar and displays other properties at the top of the screen such as Drawer. We can see the Drawer at the left of the AppBar.
Without AppBar, the Scaffold widget appears incomplete.
return Scaffold(
appBar: AppBar(
title: const Text(
'Scaffold Example',
style: TextStyle(
fontFamily: 'Allison',
),
),
),
...Certainly, we can add more functionalities to the AppBar. And in a separate discussion we’ll look into that.
After AppBar, the body property plays very extremely important role for Scaffold.
The code snippet of body property is quite simple here, as we have only give a Text output.
body: const Center(
child: Text(
'A Scaffold Example',
style: TextStyle(
fontFamily: 'Allison',
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
),As a result, it looks like the following image.
During this discussion we must admit that the body property of Scaffold might not look such simple in any Flutter app.
In this body part we can build a chain of other widgets and a humongous tree of sub-classes may form a complex visual layout.
Just to get an idea, we may take a look at the following image where we have built a book app and the body property of Scaffold displays many categories of books.
How did we use the body property in the above image?
You can read the post on GridTile.
Let us move to the next feature of Scaffold. Now we will see how the Drawer widget helps us to navigate to other screens. Drawer is an integral part of Scaffold.
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
const UserAccountsDrawerHeader(
accountName: Text("Sanjib Sinha"),
accountEmail: Text("sanjib@sanjibsinha.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.orange,
child: Text(
"S",
style: TextStyle(fontSize: 40.0),
),
),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text("Home"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("About"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.contacts),
title: const Text("Contact Us"),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
...Drawer is a slider panel mainly used for navigation. On the AppBar, either at the top left or top right section of the AppBar we can place it.
We can choose an appropriate icon for the Drawer. If we click on the Drawer the drawer menu opens up and user can navigate to other useful screens.
Take a look at the code, and compare that with the image. Now user can click any link shown on drawer and navigate to the destination.
Should I use scaffold Flutter?
Yes, we should use scaffold widget in flutter.
Why?
There are many reasons.
Let us discuss the main reasons and try to understand why we should use Scaffold.
The first and foremost of all reasons is Flutter Scaffold widget provides many default properties like AppBar, Body, Bottom Navigation, Floating Action and Persistent Footer.
Not only that, the scaffold widget controls the Material look and feel of the flutter app.
As a result, as long as we deal with material design and use MaterialApp, every page or Screen should have the scaffold widget as its immediate parent.
Consider the lower part of the screen. The Scaffold can add many functionalities there too.
Let us start with floating action button.
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.access_alarms_outlined),
onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
...Every floating action button has an onPressed method. Therefore we can use it for many purposes.
At present we’ve used it just for display and give an idea how it looks like.
As we can see in the image, the floating action button is primarily a button displayed at the bottom.
We can change its position with the help of another Scaffold property floating action button location.
At present we place it at the middle of the lower screen.
The floating action button is a circular icon button that floats over the body of a screen.
In addition, this button may promote an action in the application, which plays an important role.
These are the reasons why we should use Scaffold widget.
In the lower section of any flutter app, we can add more functionalities with the help of Scaffold widget. Not only the floating action button, but there is a Scaffold property like persistent footer buttons.
As the name suggests, we can add not one but many buttons.
persistentFooterButtons: <Widget>[
TextButton(
onPressed: () {},
child: const Icon(
Icons.backpack_rounded,
color: Colors.green,
),
),
TextButton(
onPressed: () {},
child: const Icon(
Icons.handyman_rounded,
color: Colors.red,
),
),
],
...The persistent footer buttons property returns a list of buttons displayed at the bottom of the Scaffold widget.
The advantage of persistent footer button is that buttons are always visible.
Suppose we’ve used a ListView of items, and scroll the body of the Scaffold, these buttons will remain at their place. It is always wrapped in a ButtonBar widget.
The Scaffold widget renders these buttons at the lower section of the body but just above the bottom Navigation Bar.
In the above image we see the persistent footer buttons on the right side of the lower section. The two buttons in green and red color are sandwiched between floating action button and the bottom navigation bar.
Finally we’ll take a look at one of the most important properties of bottom navigation bar.
The bottom navigation bar acts as a list of menus that we use for multiple purposes. However the name suggests that it is meant for navigating to other pages.
We can add at least five icons or text items in the bar as items.
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.teal,
items: const [
BottomNavigationBarItem(
label: 'Home',
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: 'Search',
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: 'Add',
icon: Icon(Icons.add_box),
),
],
onTap: (int index) {},
),
...We can take a look at the above image of persistent footer buttons where the bottom navigation bar is visible at the very bottom.
Finally, with the help of all Scaffold properties the flutter app looks like the following image.
And if you’re interested to take a look at the full code, here it is:
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class ScaffoldExample extends StatelessWidget {
const ScaffoldExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Scaffold Example',
home: ScaffoldHome(),
);
}
}
class ScaffoldHome extends StatelessWidget {
const ScaffoldHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Scaffold Example',
style: TextStyle(
fontFamily: 'Allison',
),
),
),
body: const Center(
child: Text(
'A Scaffold Example',
style: TextStyle(
fontFamily: 'Allison',
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
const UserAccountsDrawerHeader(
accountName: Text("Sanjib Sinha"),
accountEmail: Text("sanjib@sanjibsinha.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.orange,
child: Text(
"S",
style: TextStyle(fontSize: 40.0),
),
),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text("Home"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("About"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.contacts),
title: const Text("Contact Us"),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.access_alarms_outlined),
onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
persistentFooterButtons: <Widget>[
TextButton(
onPressed: () {},
child: const Icon(
Icons.backpack_rounded,
color: Colors.green,
),
),
TextButton(
onPressed: () {},
child: const Icon(
Icons.handyman_rounded,
color: Colors.red,
),
),
],
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.teal,
items: const [
BottomNavigationBarItem(
label: 'Home',
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: 'Search',
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: 'Add',
icon: Icon(Icons.add_box),
),
],
onTap: (int index) {},
),
backgroundColor: Colors.white,
);
}
}
To sum up, Scaffold widget has many properties that we should use with discretion. Since Scaffold has many properties, so we must be choosy to select what property would fit our criteria.
Leave a Reply