showModalBottomSheet<T> function
Null safety
- {required BuildContext context,
- required WidgetBuilder builder,
- Color? backgroundColor,
- double? elevation,
- ShapeBorder? shape,
- Clip? clipBehavior,
- BoxConstraints? constraints,
- Color? barrierColor,
- bool isScrollControlled = false,
- bool isDismissible = true,
- bool enableDrag = true,
- bool useSafeArea = false,
- RouteSettings? routeSettings,
- AnimationController? transitionAnimationController,
- Offset? anchorPoint}
Shows a modal Material Design bottom sheet.
A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.
A closely related widget is a persistent bottom sheet, which shows information that supplements the primary content of the app without preventing the user from interacting with the app. Persistent bottom sheets can be created and displayed with the showBottomSheet function or the ScaffoldState.showBottomSheet method.
The context
argument is used to look up the Navigator and Theme for
the bottom sheet. It is only used when the method is called. Its
corresponding widget can be safely removed from the tree before the bottom
sheet is closed.
The isScrollControlled
parameter specifies whether this is a route for
a bottom sheet that will utilize DraggableScrollableSheet. If you wish
to have a bottom sheet that has a scrollable child such as a ListView or
a GridView and have the bottom sheet be draggable, you should set this
parameter to true.
The useRootNavigator
parameter ensures that the root navigator is used to
display the BottomSheet when set to true
. This is useful in the case
that a modal BottomSheet needs to be displayed above all other content
but the caller is inside another Navigator.
The isDismissible
parameter specifies whether the bottom sheet will be
dismissed when user taps on the scrim.
The enableDrag
parameter specifies whether the bottom sheet can be
dragged up and down and dismissed by swiping downwards.
The useSafeArea
parameter specifies whether a SafeArea is inserted. Defaults to false.
If false, no SafeArea is added and the top padding is consumed using MediaQuery.removePadding.
The optional backgroundColor
, elevation
, shape
, clipBehavior
,
constraints
and transitionAnimationController
parameters can be passed in to customize the appearance and behavior of
modal bottom sheets (see the documentation for these on BottomSheet
for more details).
The transitionAnimationController
controls the bottom sheet's entrance and
exit animations. It's up to the owner of the controller to call
AnimationController.dispose when the controller is no longer needed.
The optional routeSettings
parameter sets the RouteSettings of the modal bottom sheet
sheet. This is particularly useful in the case that a user wants to observe
PopupRoutes within a NavigatorObserver.
A DisplayFeature can split the screen into sub-screens. The closest one to
anchorPoint
is used to render the content.
If no anchorPoint
is provided, then Directionality is used:
- for TextDirection.ltr,
anchorPoint
isOffset.zero
, which will cause the content to appear in the top-left sub-screen. - for TextDirection.rtl,
anchorPoint
isOffset(double.maxFinite, 0)
, which will cause the content to appear in the top-right sub-screen.
If no anchorPoint
is provided, and there is no Directionality ancestor
widget in the tree, then the widget asserts during build in debug mode.
Returns a Future
that resolves to the value (if any) that was passed to
Navigator.pop when the modal bottom sheet was closed.
showModalBottomSheet
to display a
bottom sheet that obscures the content behind it when a user taps a button.
It also demonstrates how to close the bottom sheet using the Navigator
when a user taps on a button inside the bottom sheet.
flutter create --sample=material.showModalBottomSheet.1 mysample
See also:
- BottomSheet, which becomes the parent of the widget returned by the
function passed as the
builder
argument to showModalBottomSheet. - showBottomSheet and ScaffoldState.showBottomSheet, for showing non-modal bottom sheets.
- DraggableScrollableSheet, which allows you to create a bottom sheet that grows and then becomes scrollable once it reaches its maximum size.
- DisplayFeatureSubScreen, which documents the specifics of how DisplayFeatures can split the screen into sub-screens.
- material.io/design/components/sheets-bottom.html#modal-bottom-sheet
Implementation
Future<T?> showModalBottomSheet<T>({
required BuildContext context,
required WidgetBuilder builder,
Color? backgroundColor,
double? elevation,
ShapeBorder? shape,
Clip? clipBehavior,
BoxConstraints? constraints,
Color? barrierColor,
bool isScrollControlled = false,
bool useRootNavigator = false,
bool isDismissible = true,
bool enableDrag = true,
bool useSafeArea = false,
RouteSettings? routeSettings,
AnimationController? transitionAnimationController,
Offset? anchorPoint,
}) {
assert(context != null);
assert(builder != null);
assert(isScrollControlled != null);
assert(useRootNavigator != null);
assert(isDismissible != null);
assert(enableDrag != null);
assert(debugCheckHasMediaQuery(context));
assert(debugCheckHasMaterialLocalizations(context));
final NavigatorState navigator = Navigator.of(context, rootNavigator: useRootNavigator);
return navigator.push(_ModalBottomSheetRoute<T>(
builder: builder,
capturedThemes: InheritedTheme.capture(from: context, to: navigator.context),
isScrollControlled: isScrollControlled,
barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
backgroundColor: backgroundColor,
elevation: elevation,
shape: shape,
clipBehavior: clipBehavior,
constraints: constraints,
isDismissible: isDismissible,
modalBarrierColor: barrierColor,
enableDrag: enableDrag,
settings: routeSettings,
transitionAnimationController: transitionAnimationController,
anchorPoint: anchorPoint,
useSafeArea: useSafeArea,
));
}