Scaffold — Flutter Explained
Every step of progress the world has made has been from scaffold to scaffold, and from stake to stake.
Wendell Phillips
If you want to know about Scaffold and its importance in flutter then you are probably in the right place. I have also written a small introduction about Flutter and its widgets. If you don’t know about the technology, have a read.
What is Scaffold?
- A widget
- A framework that implements the basic material design visual layout structure.
- A class that provides APIs for showing drawers, SnackBars, and bottom sheets.
//Constructor of Scaffoldconst Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding = true,
this.primary = true,
})Scaffold, in particular, handles the particular widgets:
- AppBar
- Body
- Floating Action Button
- Bottom Navigation Bar
- drawer
- Persistent footer buttons
Let’s discuss each of them one by one.
AppBar
An AppBar is one of the important parts of Scaffold. appBar is displayed at the top of the Scaffold.
AppBar is also used to hold a menu like a drawer or even other helper icons. An appBar is considered as the Business portion of the app as it is highlighted on the top and draws the attention of the users automatically.
App bars are typically used in the Scaffold.appBar property, which places the app bar as a fixed-height widget at the top of the screen. The AppBar displays the toolbar widgets, leading, title, and actions, above the bottom (if any). The bottom is usually used for a TabBar. If a flexibleSpace widget is specified then it is stacked behind the toolbar and the bottom widget.
Constructors:
In order to create a simple one, the AppBar class can be used.
The general constructor looks like :
AppBar(title: Text("Sample AppBar"),There are a lot of properties that constitute the AppBar class:
AppBar({
Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
Widget flexibleSpace,
PreferredSizeWidget bottom,
double elevation: 4.0,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
TextTheme textTheme,
bool primary: true,
bool centerTitle,
double titleSpacing: NavigationToolbar.kMiddleSpacing,
double toolbarOpacity: 1.0,
double bottomOpacity: 1.0
})And this is how we use AppBar inside a Scaffold.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Blogs of Ayush’),
),
body
body, clear from the name itself, constitutes the majority of Scaffold. It takes the part below the appBar, above the bottom of the ambient MediaQuery’s MediaQueryData.viewInsets, and behind the floatingActionButton and drawer. The widget in the body of the scaffold is positioned at the top-left of the available space between the app bar and the bottom of the scaffold.
If you have a column of widgets that should normally fit on the screen, but may overflow and would in such cases need to scroll, consider using a ListView as the body of the scaffold. This is also a good choice for the case where your body is a scrollable list.
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Medium Ayush Ujjwal',
theme: new ThemeData(
primarySwatch: Colors.blue,
primaryColor: const Color(0xFF2196f3),
accentColor: const Color(0xFF2196f3),
canvasColor: const Color(0xFFfafafa),
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Body Example App- Ayush'),
bottom:
new Icon(
Icons.insert_emoticon,
color: const Color(0xFF000000),
size: 48.0),
),
body:
new Text(
"Body: Add here",
style: new TextStyle(fontSize:38.0,
color: const Color(0xFF000000),
fontWeight: FontWeight.w200,
fontFamily: "Roboto"),
),
);
}
}// you can omit the new keyword as automatically flutter recognizes.
Here, I have added a Text widget holding content ‘Body: Add here’. You can add multiple widgets as per your wish with proper layout. The best part is every widget provides you with many attributes that enhance development to such an extent that you are able to build apps very fast and with the least complexity. Moreover, the debug tools provided by Android Studio also helps to manage the tree.
floatingActionButton
In simplest possible words, a button that appears to be floating at the bottom of the screen. Also known as FAB, this button is a circular icon button which on being pressed performs some actions. Generally, the roles or actions that are supported in the flutter community are ‘create’, ‘share’, or ‘navigate’.
Question 1: Can we have more than one FABs on a single page?
Ans: Yes, you can have multiple FABS on a single page but make sure each button has a unique heroTag, otherwise an exception will be thrown.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Floating Action Button'),
),
body: Center(child: const Text('Press the button below!')),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
),
);
}
bottomNavigationBar
A material widget that is displayed at the bottom of the Scaffold(or app). You would have noticed it in many apps like YouTube, LinkedIn, etc. It’s very common and makes it easier to navigate for the user as most of the time we use only one hand while operating our phones and the screen size is getting bigger day by day, so here the bottomNavigationBar comes handy. Moreover, in Android, it’s complex to implement it while flutter makes it really easy as you can see below. I have explained the code for a better understanding.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0; // this stores the index // of the button u tap static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold); static const List<Widget> _widgetOptions = <Widget>[
Text(
'U r @home',
style: optionStyle,
),
Text(
'U r @Business',
style: optionStyle,
),
Text(
'U r @School',
style: optionStyle,
),
];void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),// here is the bottomNavigationBar
// the widgets are added in the form of a list
// currentIndex stores the index of the current item
// onTap executes the function and
// then the state of the currentIndex is changed
// allowing the above body part to display the following widget bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
drawer
Drawer is a panel that is often hidden in mobile devices. It has to be swiped left-to-right or right-to-left to be displayed on the screen. Almost every app nowadays has a drawer.
In Android, there is a Slide Drawer that is similar to this. But creating one in Android is quite difficult while in flutter it’s too easy. In Flutter, we use the Drawer Widget
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(child: Text('My Page!')),
drawer: Drawer( // Add a ListView to the drawer. This ensures the user can // scroll through the options in the drawer if there isn't enough // vertical space to fit everything. child: ListView(
// Important: Remove any padding from the ListView. padding: EdgeInsets.zero,
children: <Widget>[ DrawerHeader(
child: Text('Drawer Example'),
decoration: BoxDecoration(
color: Colors.blue,
),
), ListTile(
title: Text('My Blogs'),
onTap: () {
// perform any operation
},
), ListTile(
title: Text('My Profile'),
onTap: () {
// perform any operation
},
),
ListTile(
title: Text('Contact'),
onTap: () {
// perform any operation
},
),
],
),
),
);
}
persistentFooterButtons
The name tells it all; Buttons that are in the footer section and persist to be visible even on scrolling. Exactly speaking, persistentFooterButtons are a list of buttons that are displayed at the bottom of the Scaffold. These buttons remain visible even if the user scrolls.
persistentFooterButtons: <Widget>[
RaisedButton(
elevation: 10.0,
onPressed: () {},
color: Colors.cyan,
child: Icon(
Icons.add,
color: Colors.black,
),
),
RaisedButton(
elevation: 10.0,
onPressed: () {},
color: Colors.purpleAccent,
child: Icon(
Icons.clear,
color: Colors.white,
),
),
],
So, that was a brief explanation about Scaffold. I will be coming with more Flutter related content. Till then, keep coding. Thanks for reading. :-)
