Scaffold class

Implements the basic Material Design visual layout structure.

This class provides APIs for showing drawers and bottom sheets.

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

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.

Floating action button with a draggable scrollable bottom sheet

If Scaffold.bottomSheet is a DraggableScrollableSheet, Scaffold.floatingActionButton is set, and the bottom sheet is dragged to cover greater than 70% of the Scaffold's height, two things happen in parallel:

• Scaffold starts to show scrim (see ScaffoldState.showBodyScrim), and
• Scaffold.floatingActionButton is scaled down through an animation with a Curves.easeIn, and disappears when the bottom sheet covers the entire Scaffold.

And as soon as the bottom sheet is dragged down to cover less than 70% of the Scaffold, the scrim disappears and Scaffold.floatingActionButton animates back to its normal size.

Troubleshooting

Nested Scaffolds

The Scaffold is designed to be a top level container for a MaterialApp. This means that adding a Scaffold to each route on a Material app will provide the app with Material's basic visual layout structure.

It is 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. Rather, it would be better to add a listener to the TabController that updates the AppBar

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:

• AppBar, which is a horizontal bar typically shown at the top of an app using the appBar property.
• BottomAppBar, which is a horizontal bar typically shown at the bottom of an app using the bottomNavigationBar property.
• FloatingActionButton, which is a circular button typically shown in the bottom right corner of the app using the floatingActionButton property.
• Drawer, which is a vertical panel that is typically displayed to the left of the body (and often hidden on phones) using the drawer property.
• BottomNavigationBar, which is a horizontal array of buttons typically shown along the bottom of the app using the bottomNavigationBar property.
• BottomSheet, which is an overlay typically shown near the bottom of the app. A bottom sheet can either be persistent, in which case it is shown using the ScaffoldState.showBottomSheet method, or modal, in which case it is shown using the showModalBottomSheet function.
• SnackBar, which is a lightweight message with an optional action which briefly displays at the bottom of the screen. Use the ScaffoldMessengerState.showSnackBar method to show snack bars.
• MaterialBanner, which displays an important, succinct message, at the top of the screen, below the app bar. Use the ScaffoldMessengerState.showMaterialBanner method to show material banners.
• ScaffoldState, which is the state associated with this widget.
• material.io/design/layout/responsive-layout-grid.html
• Cookbook: Add a Drawer to a screen