Flutter Scaffold

The Scaffold widget in Flutter provides a default layout structure for your app. It provides support for the standard Material design layouts such as AppBar, BottomNavigationBar, Drawer, and many more.

Syntax

Scaffold({
  Key? key,
  this.appBar,
  this.body,
  this.floatingActionButton,
  this.floatingActionButtonLocation,
  this.floatingActionButtonAnimator,
  this.persistentFooterButtons,
  this.drawer,
  this.endDrawer,
  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,
}) 

Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scaffold Example'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Output

An app with a navigation bar on top and a white background showing the text "Hello World" in the center of the screen.

Explanation

In the example above, we have created a simple app using the Scaffold widget. We have set the AppBar title to "Scaffold Example" and the body to Text('Hello World') which is centered on the screen.

Use

• The Scaffold widget provides a complete structure for your app, including navigation elements, drawers, and floating action buttons.
• Use the AppBar property to add a navigation bar to your app.
• Use the body property to add main content to your app.
• Use the floatingActionButton property to add a button that floats on top of the main content.
• Use the drawer property to add a navigation drawer to your app.
• Use the bottomNavigationBar property to add a navigation bar at the bottom of your app.
• Use the bottomSheet property to add a bottom sheet to your app.
• Use the backgroundColor property to set the background color of your app.

Important Points

• The Scaffold widget should be used as the root element of your app.
• The AppBar widget should always be present in your app for navigation.
• The body should always be a single widget, like Center, Column, Row, or ListView, and should not contain any other Scaffold widgets.
• You can create a Drawer by setting the drawer property to a Drawer widget.
• You can add persistent buttons to the bottom of your Scaffold using the persistentFooterButtons property.

Summary

In this article, we discussed the Scaffold widget in Flutter. We talked about its syntax, example, output, explanation, use, important points, and summary. The Scaffold widget is an essential widget in Flutter as it provides a complete structure for your app, including navigation elements, drawers, and floating action buttons, and also supports standard Material design layouts.