Scaffold Widget

What is Scaffold Widget?

Implements the basic Material Design visual layout structure.

Scaffold is a layout for the major Material Components.
This class provides APIs for showing drawers, snack bars, and bottom sheets.

Default Constructor

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.

Scaffold(
  appBar:// Add AppBar widget here
  body:// Add a widget to the body here
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The appBar parameter is to display at the top of the scaffold.

The body is the primary content of the scaffold. Displayed below the appBar, and behind the floatingActionButton and drawer.

Code snippet

The following code snippet shows how to configure Scaffold Widget.

Scaffold(
      // A material design app bar widget
      appBar: AppBar(
        title: Text('Welcome'),
      ),
      // body is the majority of the screen.
      body: Text('Home Page'),
    );

Demo Code

This example shows how to construct Scaffold using app bar and body parameters.

import 'package:flutter/material.dart';

class ScaffoldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold is a layout for the major Material Components.
    return Scaffold(
      // A material design app bar widget
      appBar: AppBar(
        title: Text('Welcome'),
      ),
      // body is the majority of the screen.
      body: Text('Home Page'),
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'Scaffold Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: ScaffoldDemo(),
      debugShowCheckedModeBanner: false,
    );
  }
}

void main() => runApp(MyApp());