Jetpack Compose ModalSheet Wrapper

modalsheet.md

Wrapper component

import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetState
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect

@Composable
fun ModalSheet(
    visible: Boolean,
    onDismiss: () -> Unit,
    content: @Composable ColumnScope.(SheetState) -> Unit,
) {
    val sheetState = rememberModalBottomSheetState()

    LaunchedEffect(visible) {
        if (visible) {
            sheetState.show()
        } else {
            sheetState.hide()
        }
    }

    if (!visible) {
        return
    }

    ModalBottomSheet(
        onDismissRequest = onDismiss,
        sheetState = sheetState,
    ) { content(sheetState) }
}

Usage

var visible by remember { mutableStateOf(false) }

Button(
    onClick = { visible = true }
) {
    Text("Open sheet")
}

ModalSheet(visible = visible, onDismiss = { visible = false }) { sheetState ->
    val coroutineScope = rememberCoroutineScope()

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxWidth()
            .padding(12.dp)
    ) {
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = {
                coroutineScope
                    .launch { sheetState.hide() }
                    .invokeOnCompletion {
                        onDismiss()
                    }
            }
        ) {
            Text(text = "Dismiss")
        }
    }
}