Scaffold class in Flutter with Examples

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. 
 

Class Hierarchy: 
 

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



Properties 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 properties like elevation, title, brightness, etc. 
     

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 

appBar example

 



  •  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. 
     

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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. 
 

body example

 

  • 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. 

     

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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. 
 

floatingActionButton Example

 



  • drawer: drawer is a slider menu or a panel which is displayed at the side of the Scaffold. The user has to swipe left to right or right to left according to the action defined to access the drawer menu. In the Appbar, an appropriate icon for the drawer is set automatically at a particular position. The gesture to open the drawer is also set automatically. It is handled by the Scaffold. 
     
     

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

drawer: Drawer(
          child: ListView(
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Text(
              'GeeksforGeeks',
              style: TextStyle(
                color: Colors.green,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
        ],
      ),
    ),

chevron_right


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. 
 

drawer example

We can also add icons before the items using the property leading of ListTile, inside which we have to use the Icon widget. 
Example: 
 

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

ListTile(
    title
    : Text('Item 1'),
      leading
    : Icon(Icons.people), ),
    ListTile(
        title
        : Text('Item 2'),
          leading
        : Icon(Icons.mail), ),

chevron_right


Output:
 

drawer with items having leading icon

 

  •  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. 
     

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

bottomNavigationBar
    : BottomNavigationBar(
          currentIndex : 0,
          fixedColor
          : Colors.green,
            items
          : [
              BottomNavigationBarItem(
                  title
                  : Text("Home"),
                    icon
                  : Icon(Icons.home), ),
              BottomNavigationBarItem(
                  title
                  : Text("Search"),
                    icon
                  : Icon(Icons.search), ),
              BottomNavigationBarItem(
                  title
                  : Text("Profile"),
                    icon
                  : Icon(Icons.account_circle), ),
          ],
            onTap
          : (int indexOfItem){
 
          }),

chevron_right


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. 
 

bottomNavigationBar

 

  • backgroundColor: used to set the color of the whole Scaffold widget.
  • floatingActionButtonAnimator: used to provide animation to move floatingActionButton.
  • primary: to tell whether the Scaffold will be displayed or not.
  • drawerScrimColor: used to define the color for the primary content while a drawer is open.
  • bottomSheet: This property takes in a widget  (final) as the object to display it at the bottom of the screen.
  • drawerDragStartBehaviour: This property holds DragStartBehavior 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 property 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 property 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 property takes in a boolen value as the object to determine whether the drag gesture will open the endDrawer or not.
  • extendBody: The extendBody property takes in a boolean as the object. By default, this property 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 shifted beneath the body.
  • extendBodyBehindAppBar:  This property also takes in a boolean as the object. By default, this property 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 property is used when the color of the appBar is not fully opaque.
  • floatingActionButtonLocation: This property is responsible for the location of the floatingActionBotton.
  • persistentFooterButton: This property takes in a list of widgets. Which are usually buttons that are displayed underneath the scaffold.
  • resizeToAvoidBottomInsets: This property 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.

 

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :
Practice Tags :


4


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.