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 in 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:



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

    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

  2. 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 the body are at left-corner by default.

    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 a 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

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

    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 of the preloaded icons in flutter SDK. The onPressed() is function which will be called when the button is pressed and the statements inside the function will be executed.
    floatingActionButton Example

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

    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 in 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:

    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

    
    

    drawer with items having leading icon

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

  6. backgroundColor: used to set the color of whole Scaffold widget
  7. floatingActionButtonAnimator: used to provide animation to move floatingActionButton
  8. primary: to tell whether the Scaffold will be displayed or not
  9. drawerScrimColor: used to define color for the primary content while a drawer is open

Don’t stop now and take your learning to the next level. Learn all the important concepts of Data Structures and Algorithms with the help of the most trusted course: DSA Self Paced. Become industry ready at a student-friendly price.




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.


Article Tags :
Practice Tags :


2


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