Flutter Scaffold Class

Constructors and Properties of Scaffold Class

const Scaffold({
    Key key,
    this.appBar,
    This.body,
    this.persistentFooterButtons,
    this.floatingActionButton,
    this.floatingActionButtonAnimator,
    this.floatingActionButtonLocation,
    this.drawer,
    this.endDrawer,
    this.bottomSheet,
    this.bottomNavigationBar,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.resizeToAvoidBottomPadding,
    this.primary = true,
    this.drawerDragStartBehavior
          = DragStartBehavior.start,
    this.extendBody = false,
    this.drawerScrimColor,
})

Let us see some of the important properties of the Scaffold Class in the following article.

appBar

It is primarily visible at the top of the Scaffold widget and is a horizontal bar. It appears at the top of the screen and is the primary component of the Scaffold widget. The Scaffold widget is lacking without this property. It makes use of the appBar widget, which has its own set of attributes, including elevation, brightness, title, etc.

Now let us implement a simple appBar using Scaffold Class in Flutter.

Code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
      title: Text('Scaffold Class'),
      centerTitle: true,
      backgroundColor: Colors.grey,
    )),
  ));

Output

Body

The major content of the Scaffold will be displayed using this widget's other necessary properties. It designates the area behind the floating Action Button and drawer, and below the appBar. By default, the widgets inside the body are put in the top-left corner of the available area.

Following is the simple code snippet to implement a simple body in the Scaffold Class.

Code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        body: Center(
      child: Text(
        'This is the body of Scaffold Class',
        style: TextStyle(
          fontSize: 35,
          fontWeight: FontWeight.bold,
        ),
      ),
    )),
  ));

Output

Drawer

At the side of the body, a sliding panel is visible. On mobile devices, it is often concealed, but the user can swipe it from right to left or left to right to reveal the drawer menu. To display navigation links in the application, it uses the Drawer widget properties to glide in a horizontal manner from the Scaffold edge. A suitable icon is immediately placed in an appBar attribute for the drawer. The gesture is also programmed to open the drawer automatically.

Let us implement a simple drawer in the Scaffold Class.

Code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        drawer: Drawer(
      child: ListView(
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.orange,
            ),
            child: Text(
              'Drawer of Scaffold Class',
              style: TextStyle(
                color: Colors.black,
                fontSize: 30,
              ),
            ),
          ),
          ListTile(
            title: Text('Home'),
          ),
          ListTile(
            title: Text("Favourites"),
          ),
          ListTile(
            title: Text('Settings'),
          ),
        ],
      ),
    )),
  ));

Output

floatingActionButton

It appears as a button floating above the body in the bottom right corner. It is a circular icon button that floats over the screen's content at a specific location to advertise the application's main activity. Its location cannot be altered while the page is being scrolled. It uses the FloatingActionButton widget properties using Scaffold.floatingActionButton.

Following the code for the simple floatingActionButton using Scaffold Class.

Code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        // setting the location of the floating action button
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.home),
          backgroundColor: Colors.orange,
          onPressed: () {},
        )),
  ));

Output

bottomNavigationBar

This widget creates a navigation bar at the base of the scaffold, much like a menu. The majority of mobile applications display it. The developer can add several icons or texts as elements in the bar using this attribute. Subsequent to the persistentFooterButtons and body, it ought to be rendered.

Let us implement a simple bottomNavigationBar in the Scaffold Class.

Code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
      backgroundColor: Colors.grey,
      selectedItemColor: Colors.black,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.star), label: 'Favourites'),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
      ],
    )),
  ));

Output

Important Properties

Covering all the properties of the scaffold class is not possible in a single article. Therefore, I will be explaining some important properties of the Scaffold Class that are usually used.

Frequently Asked Questions

What is Scaffold Class in Flutter?

Flutter's Scaffold class offers a variety of widgets or APIs, including Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar, etc. The Scaffold Class will enlarge or take over the entire screen of the smartphone. It will take up the space that is open.

Can we use scaffold inside scaffold Flutter?

Yes, but when we create two distinct screens, each with a different Scaffold, it is exactly what we want.

Why MaterialApp is used in Flutter?

Flutter has a built-in class called MaterialApp. It is probably the primary or central element of flutter. We have access to all the additional widgets and components that the Flutter SDK offers through the MaterialApp.

What is the difference between scaffold and container in Flutter?

AppBar, Body, Bottom Navigation, Floating Action, and Persistent Footer are features of the scaffold. Scaffolding will alter the appearance and feel of Material on screen. A basic/common widget in Flutter called a container will hold other widgets.

What is SafeArea in Flutter?

A widget with padding around its children to keep the operating system from interfering.

Conclusion

In this article, we have learned about the Scaffold Class in Flutter.

If you want to learn more, check out our articles Introduction to Flutter, Some Popular Flutter Based Apps, Features of Flutter, and Flutter Installation.

Do upvote our blogs if you find them helpful and engaging!

Happy Learning, Ninjas!