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.
link
To create a local project with this code sample, run:
flutter create --sample=material.Scaffold.1 mysample
link
To create a local project with this code sample, run:
flutter create --sample=material.Scaffold.2 mysample
link
To create a local project with this code sample, run:
flutter create --sample=material.Scaffold.3 mysample
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.
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:
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
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.
link
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
Constructors
-
Scaffold
(
{
Key
?
key
,
PreferredSizeWidget
?
appBar
,
Widget
?
body
,
Widget
?
floatingActionButton
,
FloatingActionButtonLocation
?
floatingActionButtonLocation
,
FloatingActionButtonAnimator
?
floatingActionButtonAnimator
,
Widget
?
drawer
,
DrawerCallback
?
onDrawerChanged
,
Widget
?
endDrawer
,
DrawerCallback
?
onEndDrawerChanged
,
Widget
?
bottomNavigationBar
,
Widget
?
bottomSheet
,
Color
?
backgroundColor
,
bool
?
resizeToAvoidBottomInset
,
bool
primary
=
true
,
DragStartBehavior
drawerDragStartBehavior
=
DragStartBehavior.start
,
bool
extendBody
=
false
,
bool
extendBodyBehindAppBar
=
false
,
Color
?
drawerScrimColor
,
double
?
drawerEdgeDragWidth
,
bool
drawerEnableOpenDragGesture
=
true
,
bool
endDrawerEnableOpenDragGesture
=
true
,
String
?
restorationId
}
)
-
Creates a visual scaffold for Material Design widgets.
const