Flutter Widgets (Scaffold) The Whole Picture

8 min readNov 24, 2020

Scaffold or staging in general terms is a temporary structure used to support work or workers and materials during construction or maintenance of a building or a bridge or any other man-made structure. It consists of one or more planks of convenient size and length with various methods of support depending on the form or use. Each Scaffold is individually designed to suit a particular environment.

Scaffolding can also be described as a process to organize any activity systematically to meet the needs of an individual.

Based on the above definition and explanation we can very well understand why Google decided to use Scaffold as a name for a widget. It does the same as it means when seen in Flutter development.

What is a Scaffold Widget?

A Scaffold widget is a framework or a structure that provides basic material design, a visual layout for the application and I would also like to add that, it is a starting point of the application which consists of the following widgets…

AppBar
StartDrawer
EndDrawer
BottomSheet
BottomNavigationBar
FloatingActionButton
PersistentFooterButton

Scaffold Constructor

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,      @deprecated after v1.1.9
  this.resizeToAvoidBottomInset,
  this.primary = true,
  this.drawerDragStartBehavior = DragStartBehavior.start,
  this.extendBody = false,
  this.extendBodyBehindAppBar = false,
  this.drawerScrimColor,
  this.drawerEdgeDragWidth,
  this.drawerEnableOpenDragGesture = true,
  this.endDrawerEnableOpenDragGesture = true,
})

AppBar:

It is a horizontal bar which is displayed at the top of the screen. It is one of the important and primary widgets without which the Scaffold is incomplete. The AppBar widget has properties like title, leading icon, and other action buttons.

Scaffold(  
  appBar: AppBar(
    title: Text('Scaffold Widget'),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.add_alert),
      ),
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.save),
      ),
    ],
  ),

Body:

This is another important property of Scaffold, it is where the main content of the application is displayed. It is placed below the appBar and above the bottomNavigationBar and behind the floatingActionButton. By default, all content is placed at the top left corner inside the body.

Scaffold(
  body: Align(
    alignment: Alignment.center,
    child: Container(
      child: Text('Body of the Scaffold'),
      alignment: Alignment.center,
      color: Colors.amber,
      height: 200,
      width: 200,
    ),
  ),

FloatingActionButton:

Circular button at the bottom right of the screen with an icon in the middle used as a primary action on the screen. You can read about it in detail in my previous article on Buttons.

PersistentFooterButton:

A row buttons that are placed at the bottom of the Scaffold widget, they are persistent, it means it is always visible even if the body of the Scaffold scrolls. It is wrapped in a ButtonBar widget are rendered above the BottomNavigationBar but below the body of the Scaffold.

Scaffold (
persistentFooterButtons: [
  Spacer(),
  Icon(
    Icons.apps,
    size: 36,
  ),
  Spacer(),
  Icon(
    Icons.insights,
    size: 36,
  ),
],
),

Drawer & EndDrawer:

It is a panel on either side of the body left (Drawer) or right (EndDrawer) consisting of quick navigation buttons and user information in some cases, usually hidden from the screen on mobile devices but visible on bigger screens. It takes in Drawer widget properties and slides in horizontally from either side of the screen through swipe gesture or by clicking Drawer icon in the appBar.

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader(
        accountName: Text('Get User Name'),
        accountEmail: Text('user@123.com}'),
        currentAccountPicture: CircleAvatar(
          backgroundColor: Colors.white,
          child: Text(
            'JF',
            style: TextStyle(fontSize: 40.0),
          ),
        ),
      ),
      DrawerButtonWidget(
          iconData: Icons.home, titleTxt: 'Home', onTap: () {}),
      DrawerButtonWidget(
          iconData: Icons.settings, titleTxt: 'Settings', onTap: () {}),
      DrawerButtonWidget(
          iconData: Icons.exit_to_app,
          titleTxt: 'Sign out',
          onTap: () {}),
    ],
  ),
),

endDrawer: Container(
  width: 100,
  child: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blueAccent,
          ),
          child: Center(
            child: Text(
              'Quick Actions',
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white, fontSize: 18.0),
            ),
          ),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.save,
            size: 36,
          ),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.arrow_circle_down,
            size: 36,
          ),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.thumb_up,
            size: 36,
          ),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.add_to_drive,
            size: 36,
          ),
        ),
      ],
    ),
  ),
),

BottomNavigationBar:

Similarly to AppBar, BottomNavigationBar, as the name suggests, are a row of buttons that are displayed at the bottom of the screen. It is pretty common in today’s UI design and can be seen in most applications. It consists of Icon and Text and primarily used for navigation from one screen to another. According to the material design guidelines, the BottomNavigationBar should consist of a minimum of 3 buttons and a maximum of 5 buttons.

bottomNavigationBar: BottomNavigationBar(
  backgroundColor: Colors.blue.shade900,
  unselectedItemColor: Colors.white,
  selectedItemColor: Colors.pinkAccent,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
    ),
    BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School')
  ],
),

BottomSheet:

BottomSheets are surfaces or a second screen that is anchored at the bottom of the screen either partially visible or it pops up from the bottom when a button is pressed restricting interaction with the primary screen. According to the material guidelines you can use BottomSheet in 3 ways.

Standard BottomSheet which compliments the primary screen content, which remains visible at the bottom similarly to BottomNavigationBar while the user interacts with the primary content eg: Music apps.
Modal BottomSheet which pops up from the bottom for additional items for the user to interact with it. Suitable for making menu items.
Expanding BottomSheet also known as Persistent BottomSheet provides a small, collapsable surface which can be expanded by the user either to half or full screen giving access to its full content but also restricting the user from the primary content.

You can learn more about bottomSheets on this link.

BackgroundColor: Changes the background colour of the Scaffold body.

ResizeToAvoidBottomInset: If set to true, the body and all the floating widgets will adjust their size when the on-screen keyboard is opened.

Primary: It determines if the current Scaffold is displayed at the top of the screen. Default is set to true. tip: if you are using two Scaffolds wrapped under each other you can decide which is your primary Scaffold.

DragStartBehaviour: It determines when a drag formally starts when the user initiates a drag. Default is DragStartBehavior.start.

ExtendBody: If it is set to true and if BottomNavigationBar or PersistentFooterButtons are specified, then the body of the Scaffold will extend beyond it, instead of only extending above both widgets. Default is false.

**left: ExtendBody = false , right: ExtendBody = true**

ExtendBodyBehindAppBar: If it is set to true the body will extend beyond the Appbar, instead of only starting from below the Appbar.

**right: ExtendBodyBehindAppbar = false , left: right: ExtendBodyBehindAppbar = true**

DrawerScrimColor: It changes the colour of the rest of the screen when a Drawer is opened from either side of the screen. Default is light grey.

DrawerEdgeDragWidth: It determines the area within which a horizontal swipe gesture will open the drawer. Default is 20.0.

DrawerEnableOpenDragGesture: It determines if the Drawer can be opened with a drag gesture or not, if it is set to false then the user will have to click on the icon in the AppBar to open the Drawer.

EndDrawerEnableOpenDragGesture: It determines if the EndDrawer can be opened with a drag gesture or not, if it is set to false then the user will have to click on the icon in the AppBar to open the Drawer.

I would like to leave you with this neat trick I had learnt while learning flutter as to how to design rounded corners while using the BottomSheet. Take a look at the code below and the image along with it. I have used two Containers overlapping each other. Container 1 has the same colour as the non-active screen colour and in front of it another Container with rounded corners at the top right and left.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) => SingleChildScrollView(        
        child: Container(
          height: 250,
          color: Color(0xFF737373),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15.0),
                topRight: Radius.circular(15.0),
              ),
              color: Colors.white,
            ),
            child: Center(
              child: Text(
                'Showing Modal Bottom Sheet\n with rounded corners',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 28.0),
              ),
            ),
          ),
        ),
      ),
    );
  },
  child: Icon(Icons.add),
  backgroundColor: Colors.pinkAccent,
),

I have come to the end of my article hope you enjoyed reading it. Hopefully, you have learnt something new also from it. Please do clap for me which you can do it up to 50 times and share with whomever you think might benefit from it. I want to keep writing about Flutter widgets cause I am enjoying a lot and every person who claps for me or follows me gives me immense joy knowing that I am benefiting someone.
Leaving links below to my previous stories and my social connections. Keep reading, keep coding and keep enjoying. Stay safe and take care until next time…

Links to my other stories SafeArea Widget, Expanded & Flexible, Container Widget, Row and Column, Stack & Positioned, Boxes Part-1, Boxes Part-2, TabBar & TabBarView, GridView, Buttons.

You can follow me on … on Instagram, Twitter, Linkedin, Reddit.