Flutter Scaffold

The Scaffold widget is one of the most important widgets in Flutter that provides a framework which implements the basic material design visual layout structure. When developing Flutter applications, Scaffold serves as a crucial building block for creating screens with standard Android/iOS app features.

A Flutter Scaffold widget provides a framework that comprises of drawers, snack bars, and bottom sheets in the Flutter application. It acts as a structural layout for the major material design components. The primary purpose of Scaffold is to arrange the visible elements on the screen, making it one of the most frequently used widgets in Flutter development.

The following are the constructor and properties of the Flutter Scaffold Widget class.

const Scaffold({    
  Key key,    
  this.appBar,    
  this.body,    
  this.floatingActionButton,    
  this.floatingActionButtonLocation,    
  this.persistentFooterButtons,    
  this.drawer,    
  this.endDrawer,    
  this.bottomNavigationBar,    
  this.bottomSheet,    
  this.floatingActionButtonAnimator,    
  this.backgroundColor,    
  this.resizeToAvoidBottomPadding = true,    
  this.primary = true,    
})

Key Components of Flutter Scaffold Widget

The Scaffold widget in Flutter comes with several pre-built components that can be easily customized according to your application needs:

1. AppBar

The AppBar is typically displayed at the top of the screen and includes a toolbar along with potentially other widgets such as TabBar and FlexibleSpaceBar. It provides dedicated space for displaying the screen title, navigation options, and action buttons.

appBar: AppBar(  
  title: Text('Scaffold Example'),  
  actions: [  
    IconButton(  
      icon: Icon(Icons.search),  
      onPressed: () {},  
    ),  
  ],  
)

2. Body

The body parameter represents the primary content of the Scaffold. It occupies most of the available screen space between the AppBar and BottomNavigationBar (if present).

body: Center(  
  child: Text('This is the body of Scaffold'),  
)

3. FloatingActionButton (FAB)

The FloatingActionButton is a circular icon button that floats over the UI, typically in the bottom right corner. It's used for promoting a primary action in the application.

floatingActionButton: FloatingActionButton(  
  onPressed: () {},  
  child: Icon(Icons.add),  
)

4. Drawer

A Drawer is a panel that slides in horizontally from the edge of a Scaffold to show navigation links in your application. It's commonly used to provide access to different sections of your app.

drawer: Drawer(  
  child: ListView(  
    children: [  
      DrawerHeader(  
        child: Text('Drawer Header'),  
        decoration: BoxDecoration(  
          color: Colors.blue,  
        ),  
      ),  
      ListTile(  
        title: Text('Item 1'),  
        onTap: () {},  
      ),  
    ],  
  ),  
)

5. BottomNavigationBar

The BottomNavigationBar is a horizontal bar displayed at the bottom of the Scaffold. It typically contains multiple items with icons and optional text labels.

bottomNavigationBar: BottomNavigationBar(  
  items: [  
    BottomNavigationBarItem(  
      icon: Icon(Icons.home),  
      label: 'Home',  
    ),  
    BottomNavigationBarItem(  
      icon: Icon(Icons.business),  
      label: 'Business',  
    ),  
  ],  
  currentIndex: 0,  
  onTap: (index) {},  
)

6. BottomSheet

A BottomSheet is a sheet of material that slides up from the bottom edge of the Scaffold. There are two types of bottom sheets: persistent and modal.

7. Background

The backgroundColor property allows you to set the background color of the Scaffold.

backgroundColor: Colors.lightBlue[50]

8. SnackBar

A SnackBar is a lightweight message with an optional action that briefly displays at the bottom of the screen. It's typically used to provide feedback about an operation.

ScaffoldMessenger.of(context).showSnackBar(  
  SnackBar(  
    content: Text('This is a SnackBar!'),  
    action: SnackBarAction(  
      label: 'Undo',  
      onPressed: () {},  
    ),  
  ),  
);

Implementation Examples of Flutter Scaffold

Basic Flutter Scaffold Implementation

Here's a basic implementation of a Scaffold widget in Flutter:

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(  
          title: Text('Flutter Scaffold Example'),  
        ),  
        body: Center(  
          child: Text('Welcome to Flutter Scaffold!'),  
        ),  
        floatingActionButton: FloatingActionButton(  
          onPressed: () {},  
          child: Icon(Icons.add),  
        ),  
      ),  
    );  
  }  
}