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(() {
      tooltip: 'Increment Counter',
      child: Icon(Icons.add),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Scaffold layout, the keyboard, and display "notches"

The scaffold will expand to fill the available space. That usually means that it will occupy its entire window or device screen. When the device's keyboard appears the Scaffold's ancestor MediaQuery widget's MediaQueryData.viewInsets changes and the Scaffold will be rebuilt. By default the scaffold's body is resized to make room for the keyboard. To prevent the resize set resizeToAvoidBottomInset to false. In either case the focused widget will be scrolled into view if it's within a scrollable container.

The MediaQueryData.padding value defines areas that might not be completely visible, like the display "notch" on the iPhone X. The scaffold's body is not inset by this padding value although an appBar or bottomNavigationBar will typically cause the body to avoid the padding. The SafeArea widget can be used within the scaffold's body to avoid areas like display notches.


Nested Scaffolds

The Scaffold was designed to be the single top level container for a MaterialApp and it's typically not necessary to nest scaffolds. For example in a tabbed UI, where the bottomNavigationBar is a TabBar and the body is a TabBarView, you might be tempted to make each tab bar view a scaffold with a differently titled AppBar. It would be better to add a listener to the TabController that updates the AppBar.

Add a listener to the app's tab controller so that the AppBar title of the app's one and only scaffold is reset each time a new tab is selected.
TabController(vsync: tickerProvider, length: tabCount)..addListener(() {
  if (!tabController.indexIsChanging) {
    setState(() {
      // Rebuild the enclosing scaffold with a new AppBar title
      appBarTitle = 'Tab ${tabController.index}';

Although there are some use cases, like a presentation app that shows embedded flutter content, where nested scaffolds are appropriate, it's best to avoid nesting scaffolds.

See also:



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, bool resizeToAvoidBottomInset, bool primary: true, DragStartBehavior drawerDragStartBehavior: DragStartBehavior.start, bool extendBody: false, Color drawerScrimColor })
Creates a visual scaffold for material design widgets.


appBar PreferredSizeWidget
An app bar to display at the top of the scaffold.
backgroundColor Color
The color of the Material widget that underlies the entire Scaffold. [...]
body Widget
The primary content of the scaffold. [...]
bottomNavigationBar Widget
A bottom navigation bar to display at the bottom of the scaffold. [...]
bottomSheet Widget
The persistent bottom sheet to display. [...]
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) [...]
drawerDragStartBehavior DragStartBehavior
Determines the way that drag start behavior is handled. [...]
drawerScrimColor Color
The color to use for the scrim that obscures primary content while a drawer is open. [...]
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) [...]
extendBody bool
If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons. [...]
floatingActionButton Widget
A button displayed floating above body, in the bottom right corner. [...]
floatingActionButtonAnimator FloatingActionButtonAnimator
Animator to move the floatingActionButton to a new floatingActionButtonLocation. [...]
floatingActionButtonLocation FloatingActionButtonLocation
Responsible for determining where the floatingActionButton should go. [...]
persistentFooterButtons List<Widget>
A set of buttons that are displayed at the bottom of the scaffold. [...]
primary bool
Whether this scaffold is being displayed at the top of the screen. [...]
resizeToAvoidBottomInset bool
If true the body and the scaffold's floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient MediaQuery's MediaQueryData.viewInsets bottom property. [...]
resizeToAvoidBottomPadding bool
This flag is deprecated, please use resizeToAvoidBottomInset instead. [...]
@Deprecated('Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears'), 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


createState() ScaffoldState
Creates the mutable state for this widget at a given location in the tree. [...]
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
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. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


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

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. [...]