How to implement BottomSheet in Material 3 Jetpack Compose Android

Viewed 884

I know how to implement BottomSheet in Material 2 Jetpack Compose using BottomSheetScaffold.

But there is no BottomSheetScaffold in Material 3. Also, there is nothing in official samples about BottomSheet.

1 Answers

I got pretty similar results using a fullscreen dialog with AnimatedVisibility, here is the code if interested:

// Visibility state for the dialog which will trigger it only once when called
val transitionState = remember {
    MutableTransitionState(false).apply {
        targetState = true
    }
}

Dialog(
    onDismissRequest = { // You can set a visibility state variable to false in here which will close the dialog when clicked outside its bounds, no reason to when full screen though },
    properties = DialogProperties(
        // This property makes the dialog full width of the screen
        usePlatformDefaultWidth = false
    )
) {

    // Visibility animation, more information in android docs if needed
    AnimatedVisibility(
        visibleState = transitionState,
        enter = slideInVertically(
            initialOffsetY = { it },
            animationSpec = ...
        ),
        exit = slideOutVertically(
            targetOffsetY = { it },
            animationSpec = ...
        )
    )
) {

    Box(
        modifier = Modifier.fillMaxSize().background(color = ...)
    ) {
        // Your layout

        // This can be any user interraction that closes the dialog
        Button(
            transitionState.apply { targetState = false }
        ) ...
    }
}

All of this is in a composable function that gets called when a UI action to open said dialog is performed, it's not ideal but it works.

Hope I was able to help!

Related