State of Compose 2023 results are in! Click here to learn more

← Back to Material Compose

ModalBottomSheetLayout

Component
in
Material
. Since 1.0.0

Overview

Code Examples

<a href="https://material.io/components/sheets-bottom#modal-bottom-sheet" class="external" target="_blank">Material Design modal bottom sheet</a>.

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and simple dialogs, providing additional room for content, iconography, and actions.

!Modal bottom sheet image(https://developer.android.com/images/reference/androidx/compose/material/modal-bottom-sheet.png)

A simple example of a modal bottom sheet looks like this:

Overloads

ModalBottomSheetLayout

@Composable
@ExperimentalMaterialApi
fun ModalBottomSheetLayout(
    sheetContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    sheetState: ModalBottomSheetState =
        rememberModalBottomSheetState(Hidden),
    sheetGesturesEnabled: Boolean = true,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
    content: @Composable () -> Unit
)

Parameters

NameDescription
sheetContentThe content of the bottom sheet.
modifierOptional Modifier for the entire component.
sheetStateThe state of the bottom sheet.
sheetGesturesEnabledWhether the bottom sheet can be interacted with by gestures.
sheetShapeThe shape of the bottom sheet.
sheetElevationThe elevation of the bottom sheet.
sheetBackgroundColorThe background color of the bottom sheet.
sheetContentColorThe preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for sheetBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.
scrimColorThe color of the scrim that is applied to the rest of the screen when the bottom sheet is visible. If the color passed is Color.Unspecified, then a scrim will no longer be applied and the bottom sheet will not block interaction with the rest of the screen when visible.
contentThe content of rest of the screen