Flutter Scaffold

What is Scaffold?

• A widget
• A framework that implements the basic material design visual layout structure.
• A class that provides APIs for showing AppBar, Drawers, SnackBars, and bottom sheets.

Scaffold constructor

const Scaffold({  
 Key? key,  
 PreferredSizeWidget? appBar,  
 Widget? body,  
 Widget? floatingActionButton,  
 FloatingActionButtonLocation? floatingActionButtonLocation,  
 FloatingActionButtonAnimator? floatingActionButtonAnimator,  
 List<Widget>? persistentFooterButtons,  
 Widget? drawer,  
 DrawerCallback? onDrawerChanged,  
 Widget? endDrawer,  
 DrawerCallback? onEndDrawerChanged,  
 Widget? bottomNavigationBar,  
 Widget? bottomSheet,  
 Color? backgroundColor,  
 bool? resizeToAvoidBottomInset,  
 bool primary,  
 DragStartBehavior drawerDragStartBehavior,  
 bool extendBody,  
 bool extendBodyBehindAppBar,  
 Color? drawerScrimColor,  
 double? drawerEdgeDragWidth,  
 bool drawerEnableOpenDragGesture,  
 bool endDrawerEnableOpenDragGesture,  
 String? restorationId  
})    

Properties of Scaffold

1) appBar

It displays a horizontal fixed height widget at the top of the Scaffold. appBar uses AppBar widget which has its own properties like title, leading, elevation, centerTitle etc.

2) body

It displays main content in Scaffold which is below appBar and behind drawer and floatingActionButton. The widget in the body of the scaffold is positioned at the top-left of the available space between the app bar and the bottom of the scaffold.

3) floatingActionButton

FloatingActionButton is an Icon button which floats over content at the bottom right corner of the screen so if we scroll screen, it’s position will be fixed.

4) bottomNavigationBar

bottomNavigationBar is used to show navigation menu at the bottom of the Scaffold. We can show icon, text or both in it. It is rendered below body and persistentFooterButtons.

5) drawer

It is a slider panel which is shown at the side of the Scaffold. User has to swipe left to right or right to left to open the navigation drawer. Scaffold automatically handles the drawer menu icon and gestures to open the drawer.

6) persistentFooterButtons

persistentFooterButtons are a list of widgets that are displayed at the footer sections and if the user scrolls the screen then still these buttons will be visible.

Complete Example:

import 'package:flutter/material.dart';  
  
 void main() {  
  runApp(MyApp());  
}  
  
 class MyApp extends StatelessWidget {  
 // This widget is the root of your application.  
 @Override  
 Widget build(BuildContext context) {  
  return MaterialApp(  
   debugShowCheckedModeBanner: false,  
   title: 'Flutter Demo',  
   theme: ThemeData(  
    primarySwatch: Colors.blue,  
   ),  
   home: MyHomePage(title: 'Flutter Demo Home Page'),  
  );  
 }  
}  
  
 class MyHomePage extends StatefulWidget {  
 MyHomePage({Key key, this.title}) : super(key: key);  
 final String title;  
  
 @Override  
 _MyHomePageState createState() => _MyHomePageState();  
}  
  
 class _MyHomePageState extends State<MyHomePage> {  
 int _currentIndex = 0;  
 @Override  
 Widget build(BuildContext context) {  
  return Scaffold(  
   appBar: AppBar(  
    title: Text("DroidBiz"),  
    leading: IconButton(  
     icon: Icon(Icons.menu),  
     color: Colors.white,  
     onPressed: () {},  
     iconSize: 25,  
    ),  
    actions: [  
     IconButton(  
      icon: Icon(Icons.add),  
      color: Colors.white,  
      onPressed: () {},  
      iconSize: 25,  
     ),  
     IconButton(  
      icon: Icon(Icons.notification_important),  
      color: Colors.white,  
      onPressed: () {},  
      iconSize: 25,  
     ),  
    ],  
    centerTitle: true,  
   ),  
   drawer: Drawer(  
    child: ListView(  
     children: const <Widget>[  
      DrawerHeader(  
       decoration: BoxDecoration(  
        color: Colors.blue,  
       ),  
       child: Center(  
        child: Text(  
         'Welcome to DroidBiz',  
         style: TextStyle(  
          color: Colors.white,  
          fontSize: 25,  
          ),  
         ),  
        ),  
       ),  
      ListTile(  
       title: Text('Home'),  
       leading: Icon(Icons.home),  
      ),  
      ListTile(  
       title: Text("Menu"),  
       leading: Icon(Icons.menu),  
      ),  
      ListTile(  
       title: Text("Profile"),  
       leading: Icon(Icons.person),  
      ),  
     ],  
    ),  
   ),  
   body: Center(  
    child: Text(  
     'Welcome to DroidBiz',  
    ),  
   ),  
   floatingActionButton: FloatingActionButton(  
    onPressed: () {},  
    child: Icon(Icons.add),  
   ),  
   bottomNavigationBar: BottomNavigationBar(  
    currentIndex: _currentIndex,  
    fixedColor: Colors.blue,  
    items: [  
     BottomNavigationBarItem(  
      label: 'Home',  
      icon: Icon(Icons.home),  
     ),  
     BottomNavigationBarItem(  
      label: 'Menu',  
      icon: Icon(Icons.menu),  
     ),  
     BottomNavigationBarItem(  
      label: 'Profile',  
      icon: Icon(Icons.person),  
     ),  
    ],  
    onTap: (int index) {  
     setState(() {  
      _currentIndex = index;  
     });  
    },  
   ),  
   persistentFooterButtons: <Widget>[  
    Container(  
     width: MediaQuery.of(context).size.width,  
     child: Padding(  
      padding: const EdgeInsets.all(8.0),  
      child: Text(  
       "Developed by DroidBiz.",  
       textAlign: TextAlign.center,  
       style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),  
      ),  
     ),  
    ),  
   ],  
  );  
 }  
}