Flutter Scaffold Example | Uses, Properties and Importance in 2023

- Advertisement -

Learn more about the Flutter Scaffold widget, including its uses, characteristics, and value.

The Flutter Scaffold widget serves as the screen’s foundation for a single page. The fundamental functional layout structure of an app is implemented using it. The Scaffold widget makes it simple to add useful widgets to the app, including AppBar, FloatingActionButton, ButtonNavigationBar, Drawer, and many more. 

People, who read this article also read: Flutter SDK Installation on Windows, macOS, Linux

Using Flutter Scaffold, you can quickly build an app and implement fundamental components with very little code. It also lets you add all the material components that give your app its look and feel. 

- Advertisement -

Scaffold() widget’s constructors include:

- Advertisement -
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 following is a description of the constructors’ properties:

1. backgroundColor – Color

The background color of the Flutter Scaffold screen can be altered using this property.

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

2. drawer – Widget

It is a navigation panel where various menu items can be placed for navigation. The menu icon will show up on appBar once you add a drawer to Flutter Scaffold.

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
      ],
    ),
   ),
  ),
)
Drawer Widget
Drawer Widget
Drawer Widget
Drawer Widget

3. body – Widget

The primary content asset on Flutter Scaffold is this. It will appear on the screen after you pass the widget.

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

4. floatingActionButton – Widget

It is a quick-acting floating button. 

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

5. floatingActionButtonLocation – FloatingActionButtonLocation

This property is used to specify where the floating action button will appear on the screen.

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)
Floating Action Button Location
Floating Action Button Location

People, who read this article also read: Flutter Liquid Swipe Animation

6. bottomNavigationBar – Widget

The appBar component, which is visible at the bottom of the screen, is comparable to this one. You can specify a widget for the BottomAppBar() or BottomNavigationBar() properties.

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
    ],
  ),
)
Bottom Navigation Bar
Bottom Navigation Bar

Additionally, you can use BottomAppBar() to set the notched shape on the bottomNavigationBar.

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: () {},),
      ],
    ),
  ),
)
Bottom App Bar
Bottom App Bar

7. appBar – PreferredSizeWidget

It appears as a horizontal bar at the top of the screen. One of the key elements of your app is the app bar; without it, your app might appear incomplete. The appBar widget’s own attributes include elevation, title, actions, and others. 

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

A Flutter Scaffold Widget example 

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")
        )
     );
  }
}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:

Refer to this video for any further queries

- Advertisement -

Help Us!!!

We are expert developer providing free content to help the flutter learner. We need your support. Your little support inspire us 🤗

Sarhan Bakshi
Sarhan Bakshi
I am a Writer, Designer, and Artist who is professional in all sectors. I am someone who can prove his worth and is witty and smart enough to handle any situation. I have photography skills and quick-to-act leadership abilities. I am young and sporty. Moreover, I have great social skills and can hold a conversation with people of more than one language. I am well adept in English, Bengali, and Hindi languages.

Related blog posts