Jetpack Compose ModalBottomSheet in Material 3 Compose

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

Modal bottom sheets are used as an alternative to inline menus or simple dialogs on mobile, especially when offering a long list of action items, or when items require longer descriptions and icons. Like dialogs, modal bottom sheets appear in front of app content, disabling all other app functionality when they appear, and remaining on screen until confirmed, dismissed, or a required action has been taken.

!Bottom sheet image(https://developer.android.com/images/reference/androidx/compose/material3/bottom_sheet.png)

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

Overloads

ModalBottomSheet

@Composable
@ExperimentalMaterial3Api
fun ModalBottomSheet(
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    sheetState: SheetState = rememberModalBottomSheetState(),
    shape: Shape = BottomSheetDefaults.ExpandedShape,
    containerColor: Color = BottomSheetDefaults.ContainerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomSheetDefaults.Elevation,
    scrimColor: Color = BottomSheetDefaults.ScrimColor,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    content: @Composable ColumnScope.() -> Unit,
)

Parameters

Name	Description
`onDismissRequest`	Executes when the user clicks outside of the bottom sheet, after sheet animates to Hidden.
`modifier`	Optional Modifier for the bottom sheet.
`sheetState`	The state of the bottom sheet.
`shape`	The shape of the bottom sheet.
`containerColor`	The color used for the background of this bottom sheet
`contentColor`	The preferred color for content inside this bottom sheet. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.
`tonalElevation`	The tonal elevation of this bottom sheet.
`scrimColor`	Color of the scrim that obscures content when the bottom sheet is open.
`dragHandle`	Optional visual marker to swipe the bottom sheet.
`content`	The content to be displayed inside the bottom sheet

← Back to Material 3 Compose

ModalBottomSheet

Overloads

ModalBottomSheet

Parameters