Scaffold class in Flutter with Examples

Difficulty Level :
Medium ● Last Updated :
10 Jun, 2022

Scaffold is a class in flutter which provides many widgets or we can say APIs like

Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar, 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. 

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,

Start Your Coding Journey Now!

this.bottomNavigationBar,

Login Register
this.bottomSheet,
this.backgroundColor,

this.resizeToAvoidBottomPadding,

this.resizeToAvoidBottomInset,

this.primary = true,

this.drawerDragStartBehavior

= DragStartBehavior.start,

this.extendBody = false,

this.drawerScrimColor,

})

Proper ties of Scaffold Class :  

appBar: It displays a horizontal bar which mainly placed at the top of the Scaffold.

appBar uses the widget AppBar which has its own proper ties like elevation, title,

brightness, etc. 

Dar t

Widget build(BuildContext context)

{
  return Scaffold(
    appBar: AppBar(
      title: const Text('GeeksforGeeks'),
    ),

Output : 

▲
 Start Your Coding Journey Now! Login Register

body: It will display the main or primar y content in the Scaffold. It is below the appBar

and under the floatingActionButton. The widgets inside the body are at the lef t-

Data Structures Algorithms Interview Preparation Topic-wise Practice C++ Java Python C
corner by default. 

Example :

Dar t

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

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.  

▲
 Start Your Coding Journey Now! Login Register

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.

Dar t

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
      },
    ),
  );
}
▲
 Start Your Coding Journey Now!
Here the elevation proper ty is used to give a shadow effect to the button. Icon is used to

Login Register
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.  

drawer: drawer is a slider menu or a panel which is displayed at the side of the

Scaffold. The user has to swipe lef t to right or right to lef t according to the action

defined to access the drawer menu. In the Appbar, an appropriate icon for the drawer

is set automatically at a par ticular position. The gesture to open the drawer is also set

automatically. It is handled by the Scaffold. 

Example :

Dar t

drawer: Drawer(
  child: ListView(
    children: const <Widget>[
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.green,
        ),
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(
            color: Colors.green,
            fontSize: 24,
▲
          ),
        ),
Start Your Coding Journey Now!
      ),
      ListTile(
Login Register
        title: Text('Item 1'),
      ),
      ListTile(
        title: Text('Item 2'),
      ),
    ],
  ),
),

A s a parent widget we took ListView and inside it, we divided the panel into two par ts,

Header and Menu.DrawerHeader is used to modif y 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 proper ty leading of ListTile, inside

which we have to use the Icon widget. 

Example :  

Dar t

ListTile(
    title ▲
    : Text('Item 1'),
Start Your Coding Journey Now!
      leading
    : Icon(Icons.people), ),
Login Register
    ListTile(
        title
        : Text('Item 2'),
          leading
        : Icon(Icons.mail), ),

Output :

bottomNavigationBar: bottomNavigationBar is like a menu at the bottom of the

Scaffold. We have seen this navigationbar in most of the applications. We can add

multiple icons or texts or both in the bar as items. 

Dar t

bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        fixedColor: Colors.green,
        items: const [
          BottomNavigationBarItem(
            label: "Home",
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            label: "Search",
            icon: Icon(Icons.search), ▲
          ),
Start Your Coding Journey Now!
          BottomNavigationBarItem(
            label: "Profile",
Login Register
            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 proper ty. To add items in the bar we use BottomNavigationBarItems

widget, inside which we give text and icon. For the action per formed 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

Dar t

drawer: Drawer(
  child: ListView(
    children: const <Widget>[
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.green,
        ),
        child: Text( ▲
          'GeeksforGeeks',
Start Your Coding Journey Now!
          style: TextStyle(
            color: Colors.green,
Login Register
            fontSize: 24,
          ),
        ),
      ),
      ListTile(
        title: Text('Item 1'),
      ),
      ListTile(
        title: Text('Item 2'),
      ),
    ],
  ),
),

backgroundColor: used to set the color of the whole Scaffold widget.

floatingActionButtonAnimator: used to provide animation to move

floatingActionButton.

primar y: to tell whether the Scaffold will be displayed or not.

drawerScrimColor: used to define the color for the primar y content while a drawer is

open.

bottomSheet: This proper ty takes in a widget  (final) as the object to display it at the

bottom of the screen.

drawerDragStar tBehaviour: This proper ty holds DragStar tBehavior enum as the

object to determine the drag behaviour of the drawer.

drawerEdgeDragWidth: This determines the area under which a swipe or a drag will

result in the opening of the drawer. And it takes in a double as the object.

drawerEnableOpenGesture: This proper ty holds in a boolean value as the object to

determine the drag gesture will open the drawer or not, by default it is set to true.

endDrawer: The endDrawer proper ty takes in a widget as the parameter. It is similar

to the Drawer, except the fact it opens in the opposite direction.

endDrawerEnableOpenGesture: Again this proper ty takes in a boolean value as the

object to determine whether the drag gesture will open the endDrawer or not.

extendBody: The extendBody proper ty takes in a boolean as the object. By default,

this proper ty is always false but it must not be null. If it is set to true in the presence

of a bottomNavigationBar or persistentFooterButtons, then the height of these is

added to the body and they are shif ted beneath the body.
▲
Start Your Coding Journey Now!
extendBodyBehindAppBar:  This proper ty also takes in a boolean as the object. By

Login Register
default, this proper ty is always false but it must not be null. If it is set to true the

appBar instead of being on the body is extended above it and its height is added to the

body. This proper ty is used when the color of the appBar is not fully opaque.

floatingActionButtonLocation: This proper ty is responsible for the location of the

floatingActionBotton.

persistentFooterButton: This proper ty takes in a list of widgets. Which are usually

buttons that are displayed underneath the scaffold.

resizeToAvoidBottomInsets: This proper ty takes in a boolean value as the object. If

set to true then the floating widgets on the scaffold resize themselves to avoid

getting in the way of the on-screen keyboard.

Like 41

Previous Next

▲
 Start Your Coding Journey Now! Login Register
4th of September,

do not miss the

Arenamon mint.
Learn More

Join the biggest

NFT tournament
ArenaMon League

RECOMMENDED ARTICLES Page : 1 2 3 4 5 6

Flutter - Sharing Data Among Flutter Pages

01 18, Feb 22

ListView Class in Flutter

02 10, Aug 20

Icon Class in Flutter

03 11, Oct 20

MaterialApp class in Flutter

04 02, Jan 20

Ar ticle Contributed By :

Yashpaneliya
@Yashpaneliya

▲
Vote for difficulty
Current difficulty :
Medium

Start Your Coding Journey Now! Login Register

Easy Normal Medium Hard Expert

Improved By : ankit_kumar_, surindertarika1234

Article Tags : Flutter, Java

Practice Tags : Java

Improve Article Report Issue

Writing code in comment?

Please use ide.geeksforgeeks.org,
generate link and share the link here.

Load Comments

A-143, 9th Floor, Sovereign Corporate Tower,

Sector-136, Noida, Uttar Pradesh - 201305

feedback@geeksforgeeks.org

Company Learn
About Us Algorithms
Careers Data Structures
In Media SDE Cheat Sheet
Contact Us Machine learning
Privacy Policy ▲
CS Subjects
 Copyright Policy Video Tutorials
Start Your Coding Journey Now! Login
Courses
Register

News Languages
Python
Top News
Java
Technology
CPP
Work & Career
Golang
Business
C#
Finance
SQL
Lifestyle
Kotlin
Knowledge

Web Development Contribute

Web Tutorials Write an Article
Django Tutorial Improve an Article
HTML Pick Topics to Write
JavaScript Write Interview Experience
Bootstrap Internships
ReactJS Video Internship
NodeJS

@geeksforgeeks
, Some rights reserved