Scaffold class

Implements the basic material design visual layout structure.

This class provides APIs for showing drawers, snack bars, and bottom sheets.

To display a snackbar or a persistent bottom sheet, obtain the ScaffoldState for the current BuildContext via Scaffold.of and use the ScaffoldState.showSnackBar and ScaffoldState.showBottomSheet functions.

This example shows a Scaffold with an AppBar, a BottomAppBar and a FloatingActionButton. The body is a Text placed in a Center in order to center the text within the Scaffold and the FloatingActionButton is centered and docked within the BottomAppBar using FloatingActionButtonLocation.centerDocked. The FloatingActionButton is connected to a callback that increments a counter.

int _count = 0;

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button $_count times.'),
    ),
    bottomNavigationBar: BottomAppBar(
      child: Container(height: 50.0,),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => setState(() {
        _count++;
      }),
      tooltip: 'Increment Counter',
      child: Icon(Icons.add),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
}

To create a sample project with this code snippet, run:
flutter create --sample=material.Scaffold mysample

// This example shows a [Scaffold] with an [AppBar], a [BottomAppBar] and a
// [FloatingActionButton]. The [body] is a [Text] placed in a [Center] in order
// to center the text within the [Scaffold] and the [FloatingActionButton] is
// centered and docked within the [BottomAppBar] using
// [FloatingActionButtonLocation.centerDocked]. The [FloatingActionButton] is
// connected to a callback that increments a counter.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for material.Scaffold',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Center(
        child: Text('You have pressed the button $_count times.'),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
              _count++;
            }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

Constructors

Scaffold({Key key, PreferredSizeWidget appBar, Widget body, Widget floatingActionButton, FloatingActionButtonLocation floatingActionButtonLocation, FloatingActionButtonAnimator floatingActionButtonAnimator, List<Widget> persistentFooterButtons, Widget drawer, Widget endDrawer, Widget bottomNavigationBar, Widget bottomSheet, Color backgroundColor, bool resizeToAvoidBottomPadding: true, bool primary: true }): Creates a visual scaffold for material design widgets.
const

Properties

appBar → PreferredSizeWidget: An app bar to display at the top of the scaffold.
final
backgroundColor → Color: The color of the Material widget that underlies the entire Scaffold. [...]
final
body → Widget: The primary content of the scaffold. [...]
final
bottomNavigationBar → Widget: A bottom navigation bar to display at the bottom of the scaffold. [...]
final
bottomSheet → Widget: The persistent bottom sheet to display. [...]
final
drawer → Widget: A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from either left-to-right (TextDirection.ltr) or right-to-left (TextDirection.rtl) [...]
final
endDrawer → Widget: A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from right-to-left (TextDirection.ltr) or left-to-right (TextDirection.rtl) [...]
final
floatingActionButton → Widget: A button displayed floating above body, in the bottom right corner. [...]
final
floatingActionButtonAnimator → FloatingActionButtonAnimator: Animator to move the floatingActionButton to a new floatingActionButtonLocation. [...]
final
floatingActionButtonLocation → FloatingActionButtonLocation: Responsible for determining where the floatingActionButton should go. [...]
final
persistentFooterButtons → List<Widget>: A set of buttons that are displayed at the bottom of the scaffold. [...]
final
primary → bool: Whether this scaffold is being displayed at the top of the screen. [...]
final
resizeToAvoidBottomPadding → bool: Whether the body (and other floating widgets) should size themselves to avoid the window's bottom padding. [...]
final
hashCode → int: The hash code for this object. [...]
read-only, inherited
key → Key: Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType → Type: A representation of the runtime type of the object.
read-only, inherited

Methods

createState() → ScaffoldState: Creates the mutable state for this widget at a given location in the tree. [...]
override
createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String: Returns a one-line detailed description of the object. [...]
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(dynamic other) → bool: The equality operator. [...]
inherited

Static Methods

geometryOf(BuildContext context) → ValueListenable<ScaffoldGeometry>: Returns a ValueListenable for the ScaffoldGeometry for the closest Scaffold ancestor of the given context. [...]
hasDrawer(BuildContext context, { bool registerForUpdates: true }) → bool: Whether the Scaffold that most tightly encloses the given context has a drawer. [...]
of(BuildContext context, { bool nullOk: false }) → ScaffoldState: The state from the closest instance of this class that encloses the given context. [...]