Scaffold class in Flutter with Examples

Scaffold is a class in flutter which provides many widgets or we can say APIs like Drawer, Snack-Bar, Bottom-Navigation-Bar, Floating-Action-Button, App-Bar, etc. Scaffold will expand or occupy the whole device screen. It will occupy the available space. Scaffold will provide a framework to implement the basic material design layout of the application.

Also Read:- Elementor widget panel not loading

The class Hierarchy is as follows:

Object
 ↳ Diagnosticable
   ↳ Diagnosticable Tree
     ↳ Widget
       ↳ StateFul Widget
         ↳ Scaffold

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,
})

Also Read:-What is the difference between static, const, and final in Dart?

Properties of Scaffold Class:  

• app-Bar: It displays a horizontal bar which mainly placed at the top of the Scaffold. appBar uses the widget AppBar which has its own properties like elevation, title, brightness, etc. 

Widget build(BuildContext context)
{
return Scaffold(
	appBar: AppBar(
	title: const Text('GeeksforGeeks'),
	),

• body: It will display the main or primary content in the Scaffold. It is below the appBar and under the floatingActionButton. The widgets inside the body are at the left-corner by default. 

Example:

Widget build(BuildContext context) {
return Scaffold(
	appBar: AppBar(title: const Text('GeeksforGeeks')),
	body: const Center(
	child: Text(
		"Welcome to GeeksforGeeks!!!",
		style: TextStyle(
		color: Colors.black,
		fontSize: 40.0,
		),
	),
	),
);
}

floatingActionButton: FloatingActionButton is a button that is placed at the right bottom corner by default. FloatingActionButton is an icon button that floats over the content of the screen at a fixed place. If we scroll the page its position won’t change, it will be fixed.

Widget build(BuildContext context) {
return Scaffold(
	appBar: AppBar(title: const Text('GeeksforGeeks')),
	body: const Center(
	child: Text(
		"Welcome to GeeksforGeeks!!!",
		style: TextStyle(
		color: Colors.black,
		fontSize: 40.0,
		),
	),
	),
	floatingActionButton: FloatingActionButton(
	elevation: 10.0,
	child: const Icon(Icons.add),
	onPressed: () {
		// action on button press
	},
	),
);
}