BottomSheet

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.

Common
@Composable
@ExperimentalMaterial3Api
fun BottomSheet(
    modifier: Modifier = Modifier,
    state: SheetState = rememberModalBottomSheetState(),
    onDismissRequest: () -> Unit = {},
    maxWidth: Dp = BottomSheetDefaults.SheetMaxWidth,
    gesturesEnabled: Boolean = true,
    backHandlerEnabled: Boolean = true,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    contentWindowInsets: @Composable () -> WindowInsets = {
        BottomSheetDefaults.standardWindowInsets
    },
    shape: Shape = BottomSheetDefaults.ExpandedShape,
    containerColor: Color = BottomSheetDefaults.ContainerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomSheetDefaults.Elevation,
    shadowElevation: Dp = 0.dp,
    content: @Composable ColumnScope.() -> Unit,
)

Parameters
modifier The modifier to be applied to the bottom sheet.
state The state object managing the sheet's value and offsets.
onDismissRequest Optional callback invoked when the sheet is swiped to Hidden.
maxWidth Dp that defines what the maximum width the sheet will take. Pass in Dp.Unspecified for a sheet that spans the entire screen width.
gesturesEnabled Whether gestures are enabled.
backHandlerEnabled Whether dismissing via back press and predictive back behavior is enabled
dragHandle Optional visual marker to indicate the sheet is draggable.
contentWindowInsets Window insets to be applied to the content.
shape The shape of the bottom sheet.
containerColor The background color of the bottom sheet.
contentColor The preferred content color.
tonalElevation The tonal elevation of the bottom sheet.
shadowElevation The shadow elevation of the bottom sheet.
content The content of the sheet.

Code Examples

ManualModalBottomSheetSample

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun ManualModalBottomSheetSample() {
    var showSheet by remember { mutableStateOf(false) }
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(onClick = { showSheet = true }) { Text("Show Manual Sheet") }
    }
    val sheetState = rememberModalBottomSheetState()
    if (showSheet) {
        Scrim("scrim", onClick = { showSheet = false })
        BottomSheet(
            modifier = Modifier,
            state = sheetState,
            onDismissRequest = { showSheet = false },
        ) {
            LazyColumn {
                items(25) {
                    ListItem(
                        headlineContent = { Text("Item $it") },
                        leadingContent = {
                            Icon(
                                Icons.Default.Favorite,
                                contentDescription = "Localized description",
                            )
                        },
                        colors =
                            ListItemDefaults.colors(
                                containerColor = MaterialTheme.colorScheme.surfaceContainerLow
                            ),
                    )
                }
            }
        }
    }
    // Handle sheet animations
    LaunchedEffect(showSheet) {
        if (showSheet) {
            sheetState.show()
        } else {
            sheetState.hide()
        }
    }
}
View all →
View all →