Flutter Scaffold

The Scaffold widget is used to implement the basic material design visual layout. It eases the creation of a general-purpose mobile application and provides everything that we need to create a functional and responsive app. This widget occupies the whole screen. It is used to create a base for the app screen on which the child widgets hold on and render. It has many properties on which you can add widgets for showing Drawer, SnackBar, BottomNavigationBar, AppBar, FloatingActionButton, etc.

The Scaffold class is a blueprint to set up the basic look and design of our app that allows a user not to build the individual visual elements manually. The following below are the constructor and properties of a Scaffold widget class.

const Scaffold({  
  Key key,  
  this.appBar,  
  this.body,  
  this.floatingActionButton,  
  this.floatingActionButtonLocation,  
  this.persistentFooterButtons,  
  this.drawer,  
  this.endDrawer,  
  this.bottomNavigationBar,  
  this.bottomSheet,  
  this.floatingActionButtonAnimator,  
  this.backgroundColor,  
  this.resizeToAvoidBottomPadding = true,  
  this.primary = true,  
})   

Let us talk about all of the above properties in detail.

1. appBar: AppBar is a horizontal bar mainly used to display the top of the Scaffold widget. Which show on top of the screen. We can use the appBar widget which has various properties like elevation, title, brightness, etc.
2. body: Body signifies the body of the scaffold widget,we add the content which will be shown on the screen. It shows below the appBar and behind the floatingActionButton & drawer. The widgets inside the body are positioned at the top-left of the available space by default.
3. drawer: Drawer is the slider panel that is displayed at the side screen. Usually, it is hidden, but the user can open the driver by swiping left to right or right to left or clicking on the burger icon in appBar. Drawer widget is used to create a drawer as it slides in a horizontal direction from the Scaffold edge. An Burger icon for the drawer is set automatically in an appBar property. The gesture is also set automatically to open the drawer.
4. floatingActionButton: This is a button displayed floating at the bottom right or left corner and floating above the body. This is a circular icon button that floats over the content of the screen at a fixed place to promote a primary action on the screen. While scrolling the page, it has a static position that cannot be changed. FloatingActionButton widget properties are used to implement it.
5. backgroundColor: This is used for setting the background color of the Scaffold widget.
6. bottomNavigationBar: This property works like a menu that displays a navigation bar at the bottom of the Scaffold widget. This property allows the developer to add multiple icons or texts in the bar as items.
7. floatingActionButtonLocation: By default, floatingActionButton is positioned at the bottom right corner. This pro is used to determine the position of the floatingActionButton. It contains many predefined constants, such as centerDocked, centerFloat, endDocked, endFloat, etc.

If we want to learn it in more detail, refer to the flutter documentation here.

Let us see the example where we have tried to use most of the Scaffold properties to understand this widget quickly and easily.

In this example, we are going to see a Scaffold widget with an AppBar, BottomAppBar, FloatingActionButton, floatingActionButtonLocation, and drawer properties.

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
/// This Widget is the main application widget.  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyStatefulWidget(),  
    );  
  }  
}  
  
class MyStatefulWidget extends StatefulWidget {  
  MyStatefulWidget({Key key}) : super(key: key);  
  
  @override  
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();  
}  
  
class _MyStatefulWidgetState extends State {  
  int _count = 0;  
  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter Scaffold Example'),  
      ),  
      body: Center(  
        child: Text('We have pressed the button $_count times.'),  
      ),  
      bottomNavigationBar: BottomAppBar(  
        shape: const CircularNotchedRectangle(),  
        child: Container(  
          height: 50.0,  
        ),  
      ),  
      floatingActionButton: FloatingActionButton(  
        onPressed: () => setState(() {  
          _count++;  
        }),  
        tooltip: 'Increment Counter',  
        child: Icon(Icons.add),  
      ),  
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,  
      drawer: Drawer(  
        elevation: 20.0,  
        child: Column(  
          children: [  
            UserAccountsDrawerHeader(  
              accountName: Text("javatpoint"),  
              accountEmail: Text("javatpoint@gmail.com"),  
              currentAccountPicture: CircleAvatar(  
                backgroundColor: Colors.yellow,  
                child: Text("abc"),  
              ),  
            ),  
            ListTile(  
              title: new Text("Inbox"),  
              leading: new Icon(Icons.mail),  
            ),  
            Divider( height: 0.1,),  
            ListTile(  
              title: new Text("Primary"),  
              leading: new Icon(Icons.inbox),  
            ),  
            ListTile(  
              title: new Text("Social"),  
              leading: new Icon(Icons.people),  
            ),  
            ListTile(  
              title: new Text("Promotions"),  
              leading: new Icon(Icons.local_offer),  
            )  
          ],  
        ),  
      ),  
    );  
  }  
}     

Output:

When we run this project in the IDE, we will see the UI as the following screenshot.

If we click on the three lines that can be seen in the top left corner of the screen, we will see the drawer. The drawer can be swiped right to left or left to right. See the below image.