Scaffold Class in Flutter

Pankaj Tyagi

27 April 2023

In this blog we are going to know about scaffold class in flutter.

Scaffold is a class in flutter which provide api’s to use to its widgets to create layout.

A Scaffold class provides a framework which implements the basic material design visual layout structure of the flutter app.

Scaffold class provide many widget to design or we can say api to show Drawer, AppBar, Bottom navigation bar etc.

Check our Flutter app development company page.

Some of the widget of Scaffold class are:

Bottom Navigation Bar
Drawer
Snack Bar
Body
App Bar
Bottom sheet etc.

Constructor of scaffold class :


const Scaffold({
Key? key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.onDrawerChanged,
this.endDrawer,
this.onEndDrawerChanged,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
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,
this.restorationId,
})

const Scaffold({

Key? key,

this.appBar,

this.body,

this.floatingActionButton,

this.floatingActionButtonLocation,

this.floatingActionButtonAnimator,

this.persistentFooterButtons,

this.drawer,

this.onDrawerChanged,

this.endDrawer,

this.onEndDrawerChanged,

this.bottomNavigationBar,

this.bottomSheet,

this.backgroundColor,

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,

this.restorationId,

})

We are going to discuss some widgets of scaffold class

First, we will discuss about most common widget of any application “AppBar“

App bar in Scaffold class

App bar is horizontally bar positioned at the top of screen
We can display information and menu and drawer option in app bar according to requirement.
It is just like a toolbar in android app.

Let’s take an example for AppBar :

class _MyAppState extends State 
{@override
Widget build(BuildContext context) {
return MaterialApp(
home
: Scaffold(appBar
: AppBar(title
: Text("App bar Example of scaffold class"),
),
), );
}
}

class _MyAppState extends State

{@override

Widget build(BuildContext context) {

return MaterialApp(

home

: Scaffold(appBar

: AppBar(title

: Text("App bar Example of scaffold class"),

), );

}

Result :

Drawer In Scaffold class

Drawer is side panel positioned at the side of screen.
We can display menu item in drawer.
Drawer can hide and show on any button click event.
An appropriate icon for the drawer is set automatically in an AppBar

Let’s take an example of Drawer

class _MyAppState extends State&lt;MyApp&gt; {

  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     home
         : Scaffold(appBar
         : AppBar(title
         : Text("App bar Example of scaffold class"),
     ),
       drawer: Drawer(
         child: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: &lt;Widget&gt;&#091;
               const Text('Drawer example of scaffold class'),
              
             ],
           ),
         ),
       ),
       // Disable opening the drawer with a swipe gesture.
       drawerEnableOpenDragGesture: false,
        ), );

class _MyAppState extends State<MyApp> {

@override

Widget build(BuildContext context) {

return MaterialApp(

home

: Scaffold(appBar

: AppBar(title

: Text("App bar Example of scaffold class"),

drawer: Drawer(

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

const Text('Drawer example of scaffold class'),

// Disable opening the drawer with a swipe gesture.

drawerEnableOpenDragGesture: false,

), );

Result :

Floating Action Button:

Floating button widget floats at the top of content of the screen.
It is positioned to left bottom corner of screen.
When we scroll the screen its position remains unchanged.
We can add desired icon on it and can handle it click event on “onpPressed” property.
This is same as Floating action button in android.

class _MyAppState extends State&lt;MyApp&gt; {

  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     home
         : Scaffold(appBar
         : AppBar(title
         : Text("Floating button Example of scaffold class"),
     ),
         floatingActionButton: FloatingActionButton(
             elevation: 10.0,
             child: Icon(Icons.add),
             onPressed: (){
               Text("Floating button clicked ");
             }
         )
     ), );
  }
}

class _MyAppState extends State<MyApp> {

@override

Widget build(BuildContext context) {

return MaterialApp(

home

: Scaffold(appBar

: AppBar(title

: Text("Floating button Example of scaffold class"),

floatingActionButton: FloatingActionButton(

elevation: 10.0,

child: Icon(Icons.add),

onPressed: (){

Text("Floating button clicked ");

}

)

), );

}

Bottom Navigation Bar

Bottom navigation bar display navigation menu at the bottom of screen.
We can add multiple item in bottom navigation bar with icon.
We can handle event of bottom navigation item “ontap()” property.

class _MyAppState extends State&lt;MyApp&gt; {


  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     home
         : Scaffold(appBar
         : AppBar(title
         : Text("Bottom navigation Example of scaffold class"),
     ),
       bottomNavigationBar: BottomNavigationBar(
         fixedColor: Colors.green,
         backgroundColor: Colors.amber,
         items: &#091;
           BottomNavigationBarItem(
             title: Text("Home Screen"),
             icon: Icon(Icons.home),
           ),
           BottomNavigationBarItem(
             title: Text("Search item"),
             icon: Icon(Icons.search),
           ),

         ],
         onTap: (int itemIndex){
          //set your functionality on item click
         },
       ),
     ), );
  }
}

class _MyAppState extends State<MyApp> {

@override

Widget build(BuildContext context) {

return MaterialApp(

home

: Scaffold(appBar

: AppBar(title

: Text("Bottom navigation Example of scaffold class"),

bottomNavigationBar: BottomNavigationBar(

fixedColor: Colors.green,

backgroundColor: Colors.amber,

items: [

BottomNavigationBarItem(

title: Text("Home Screen"),

icon: Icon(Icons.home),

BottomNavigationBarItem(

title: Text("Search item"),

icon: Icon(Icons.search),

onTap: (int itemIndex){

//set your functionality on item click

), );

}

Result :

Bottom navigation example of scaffold class

Conclusion :

In this blog we learn about Scaffold class and some widgets provided by scaffold class.

For more details please click here.

Hope ! this will help you in finding what you are looking for.

Thanks For Reading