Bottom sheet In JetPack compose

ModalBottomSheet.kt

/* Ref: https://www.composables.com/tutorials/bottomsheet */

val sheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden
)
val scope = rememberCoroutineScope()

ModalBottomSheetLayout(sheetState = sheetState, sheetContent = {
    Column(Modifier.padding(16.dp)) {
        repeat(3) { index ->
            Row(horizontalArrangement = Arrangement.spacedBy(20.dp),
                modifier = Modifier
                    .clickable { /* TODO */ }
                    .fillMaxWidth()
                    .padding(vertical = 10.dp)) {
                Icon(
                    Icons.Rounded.ShoppingCart, contentDescription = null
                )
                Text("Option $index")
            }
        }
    }
}) {
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(onClick = {
            scope.launch {
                sheetState.show()
            }
        }) {
            Text("Buy")
        }
    }
}

ModalBottomSheetM3.kt

/* Ref: https://www.composables.com/tutorials/bottomsheet */
/* Bottom Sheets in Material 3 */

val sheetState = rememberSheetState()
val scope = rememberCoroutineScope()

Button(onClick = {
    scope.launch {
        sheetState.show()
    }
}) {
    Text("Show sheet")
}
if (sheetState.isVisible) {
    ModalBottomSheet(
        sheetState = sheetState,
        onDismissRequest = {
            scope.launch {
                sheetState.hide()
            }
        },
    ) {
        Row(horizontalArrangement = Arrangement.SpaceAround) {
            CenterAlignedTopAppBar(navigationIcon = {
                IconButton(onClick = {
                    scope.launch {
                        sheetState.hide()
                    }
                }) {
                    Icon(Icons.Rounded.Close, contentDescription = "Cancel")
                }
            }, title = { Text("Content") }, actions = {
                IconButton(onClick = { }) {
                    Icon(Icons.Rounded.Check, contentDescription = "Save")
                }
            })
        }
    }
}

StandardBottomSheet.kt

/* Ref: https://www.composables.com/tutorials/bottomsheet */
/*
How to use a Standard bottom sheet

As Standard bottom sheets are part of your screens layout, you need to use a BottomSheetScaffold.

You would need to provide the contents of your bottom sheet via the sheetContent.
*/

val bottomSheetState = rememberBottomSheetState(
    initialValue = BottomSheetValue.Collapsed
)
val scope = rememberCoroutineScope()

BottomSheetScaffold(
    scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState),
    sheetContent = {
        Column(Modifier.fillMaxSize()) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text("Current song title", modifier = Modifier.weight(1f))
                IconButton(onClick = { /*TODO play song*/ }) {
                    Icon(
                        Icons.Rounded.PlayArrow,
                        contentDescription = "Play"
                    )
                }
            }
        }
    }) {
    Button(onClick= {
        scope.launch {
            bottomSheetState.expand()
        }
     }) {
        Text("Expand")
    }
}