The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .
The class Hierarchy is as follows:
Object
↳ Diagnosticable
↳ Diagnosticable Tree
↳ Widget
↳ StateFul Widget
↳ Scaffold
The constructor of the Scaffold class:
const 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,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.drawerScrimColor,
})
Properties of Scaffold Class
Example of Scaffold Class in Flutter
1. app-Bar
Below is the example of app-Bar:
Widget build(BuildContext context)
{
return Scaffold(
// App bar with a title
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text(
"GeeksforGeeks",
style: TextStyle(color: Colors.white),
),
),
Output:
2. body
Below is the example of body:
Widget build(BuildContext context) {
return Scaffold(
// App bar with a green background and a title
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text(
"GeeksforGeeks",
style: TextStyle(color: Colors.white),
),
),
// Centered body text
body: const Center(
child: Text(
"Welcome to GeeksforGeeks!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
);
}
In this example, we have displayed the text Welcome to GeeksforGeeks!!! in the body. We have displayed the text in the center of the page using Center widget. For styling the text, we have used TextStyle widget.
Output:
3. floatingActionButton
Below is the implementation of floatingActionButton:
Widget build(BuildContext context) {
return Scaffold(
// App bar with a green background and a title
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text(
"GeeksforGeeks",
style: TextStyle(color: Colors.white),
),
),
// Centered body text
body: const Center(
child: Text(
"Welcome to GeeksforGeeks!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
// Floating action button with an add icon
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
elevation: 10.0,
child: const Icon(
Icons.add,
color: Colors.white,
),
onPressed: () {
// Action on button press
},
),
);
}
Here the elevation property is used to give a shadow effect to the button. Icon is used to put the icon of the button using some preloaded icons in flutter SDK. The onPressed() is a function that will be called when the button is pressed and the statements inside the function will be executed.
Output:
4. drawer
Below is the Example of drawer:
drawer: Drawer(
child: ListView(
children: const <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.green,
),
child: Text(
'GeeksforGeeks',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
],
),
),
As a parent widget we took ListView and inside it, we divided the panel into two parts, Header and Menu.DrawerHeader is used to modify the header of the panel. In header we can display icon or details of user according to the application. We have used ListTile to add the items to the menu.
Output:
We can also add icons before the items using the property leading of ListTile, inside which we have to use the Icon widget.
Example:
ListTile(
title
: Text('Item 1'),
leading
: Icon(Icons.people), ),
ListTile(
title
: Text('Item 2'),
leading
: Icon(Icons.mail), ),
Output:
5. bottomNavigationBar
Below is the implementation of bottomNavigationBar:
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.green,
items: const [
BottomNavigationBarItem(
label: "Home",
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: "Search",
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: "Profile",
icon: Icon(Icons.account_circle),
),
],
onTap: (int indexOfItem) {}),
We use BottomNavigationBar widget to display the bar. For the color of active icon, we use the fixedColor property. To add items in the bar we use BottomNavigationBarItems widget, inside which we give text and icon. For the action performed on the tapping on the items, we have onTap(int indexOfItem) function which works according to the index position of the item.
Output:
Full code (main.dart):
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Scaffold Example',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
// Method to handle bottom navigation bar item taps
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scaffold Example'),
foregroundColor: Colors.white,
backgroundColor: Colors.green,
),
body: Center(
child: Text(
'Selected Index: $_selectedIndex',
style: TextStyle(fontSize: 24, color: Colors.black),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Floating Action Button Pressed')),
);
},
child: Icon(
Icons.add,
color: Colors.white,
),
backgroundColor: Colors.green,
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.green,
),
child: Text(
'GeeksforGeeks',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Handle item 1 tap
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Handle item 2 tap
Navigator.pop(context);
},
),
],
),
),
endDrawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'End Drawer',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('End Drawer Item 1'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.green,
onTap: _onItemTapped,
),
persistentFooterButtons: <Widget>[
TextButton(
onPressed: () {},
child: Text('Footer Button 1'),
),
TextButton(
onPressed: () {},
child: Text('Footer Button 2'),
),
],
backgroundColor: Colors.white,
resizeToAvoidBottomInset: false,
drawerScrimColor: Colors.black.withOpacity(0.5),
);
}
}
Output: