Flutter Scaffold

The Scaffold widget is the base of the screen for a single page. It is used to implement the basic functional layout structure of an app. You can easily implement functional widgets like AppBar, FloatingActionButton, ButtonNavigationBar, Drawer, and many more widgets on the app using the Scaffold widget. 

You can easily build an app using Scaffold and implement basic components with very less code, it can allow you to put all the material components to give look and feel to your app. 

Constructors of Scaffold() widget:

Scaffold({
  Key key, 
  PreferredSizeWidget appBar, 
  Widget body, 
  Widget floatingActionButton, 
  FloatingActionButtonLocation floatingActionButtonLocation, 
  FloatingActionButtonAnimator floatingActionButtonAnimator, 
  List persistentFooterButtons, 
  Widget drawer, 
  Widget endDrawer, 
  Widget bottomNavigationBar, 
  Widget bottomSheet, 
  Color backgroundColor, 
  bool resizeToAvoidBottomPadding, 
  bool resizeToAvoidBottomInset, 
  bool primary: true, 
  DragStartBehavior drawerDragStartBehavior: 
  DragStartBehavior.start, 
  bool extendBody: false, 
  bool extendBodyBehindAppBar: false, 
  Color drawerScrimColor, 
  double drawerEdgeDragWidth, 
  bool drawerEnableOpenDragGesture: true, 
  bool endDrawerEnableOpenDragGesture: true
})

The properties of the constructors are explained below:

1. appBar - PreferredSizeWidget

It is a horizontal bar displayed at the top of the screen. The app bar is one of the main components in your app, without it, your app may seem incomplete. The appBar widget has its own properties like elevation, title, actions, etc. 

Scaffold(
  appBar: AppBar( 
      title:Text("AppBar"), //title aof appbar
      backgroundColor: Colors.redAccent, //background color of appbar
  ),
)

2. backgroundColor - Color

This property on Scaffold is used to change the background color of the Scaffold screen.

Scaffold(
    backgroundColor: Colors.blue, //set background color of scaffold to blue
)

3. body - Widget

This is the main content property on Scaffold. You have to pass the widget and it will be displayed on the screen.

Scaffold(
  body: Center( //content body on scaffold
       child: Text("Scaffold Widget")
  )
)

4. floatingActionButton - Widget

It is a floating button that is used for quick action. 

Scaffold(
    floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
        onPressed: (){
            //code to execute on button press
        },
        child: Icon(Icons.send), //icon inside button
    )
)

5. floatingActionButtonLocation - FloatingActionButtonLocation

This property is used to set location of Floating action button on the screen.

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)

6. drawer - Widget

It is a navigation panel where you can put different menu items to navigate. When you add a drawer to Scaffold, the menu icon will appear on appBar.

Scaffold(
  drawer: Drawer( //drawer navigation on scaffold
    child: SafeArea(
     child:Column( //column widget
      children: [
          ListTile(
            leading: Icon(Icons.home),
            title: Text("Home Page"),
            subtitle: Text("Subtitle menu 1"),
          ),
          ListTile(
            leading: Icon(Icons.search),
            title: Text("Search Page"),
            subtitle: Text("Subtitle menu 1"),
          ),

          //put more menu items here
      ],
    ),
   ),
  ),
)

Menu Icon on AppBar Leading	Drawer open when click on Menu Icon

7. bottomNavigationBar - Widget

This component is similar to appBar which is displayed at bottom of the screen. You can pass BottomNavigationBar() widget or BottomAppBar() widget on this property.

Scaffold(
  bottomNavigationBar: BottomNavigationBar( //bottom navigation bar on scaffold
    items: [ //items inside navigation bar
        BottomNavigationBarItem(
          icon: Icon(Icons.add),
          label: "Button 1",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: "Button 2",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.camera),
          label: "Button 3",
        ),

        //put more items here
    ],
  ),
)

You can also set notched shape on bottomNavigationBar with  BottomAppBar().

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar( //bottom navigation bar on scaffold
    shape: CircularNotchedRectangle(), //shape of notch
    notchMargin: 10, //notche margin between floating button and bottom appbar
    child: Row( //children inside bottom appbar
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(icon: Icon(Icons.menu), onPressed: () {},),
        IconButton(icon: Icon(Icons.search), onPressed: () {},),
      ],
    ),
  ),
)

Example of Scaffold widget: 

import 'package:flutter/material.dart';

void main() {
   runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
        appBar: AppBar( //appbar widget on Scaffold
          title:Text("AppBar")
        ),
        floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
          onPressed: (){},
          child: Icon(Icons.send),
        ),

        drawer: Drawer(), //drawer on scaffold, open with left menu icon
        endDrawer: Drawer(), //end drawer on scaffold, open with right menu icon

        bottomNavigationBar: BottomNavigationBar( //bottom navigation bar on scaffold
         items: [
             BottomNavigationBarItem(
               icon: Icon(Icons.add),
               label: "Button 1",
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.search),
               label: "Button 2",
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.camera),
               label: "Button 3",
             ),
        ],),

        body: Center( //content body on scaffold
           child: Text("Scaffold Widget")
        )
     );
  }
}

Output:

Basic App Built with Scaffold()	Default Drawer	End Drawer