How i can implement bottomSheet in jetpack compose with three states?

Question

i need to implement this three states bottom sheet layout with jetpack compose usage, how i can implement this by best practices?

https://i.stack.imgur.com/86FXs.png

Answer 1

ModalBottomSheetValue has a state HalfExpanded

The bottom sheet is partially visible at 50% of the screen height. This state is only enabled if the height of the bottom sheet is more than 50% of the screen height.

as a result yours ModalBottomSheetLayout should have a height of more than half of the screen

My example. Please pay attention to this code height(600.dp) . Try to play with this value

class ComposeActivity7 : ComponentActivity() {

    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTutorialTheme {
                val modalBottomSheetState =
                    rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
                val scope = rememberCoroutineScope()

                Scaffold(
                    floatingActionButton = {
                        FloatingActionButton(
                            onClick = {
                                scope.launch {
                                    modalBottomSheetState.show()
                                }
                            }) {
                            Icon(
                                Icons.Rounded.Add,
                                contentDescription = "add"
                            )
                        }
                    }) {
                    ModalBottomSheetLayout(
                        sheetState = modalBottomSheetState,
                        sheetContent = {
                            MySheet()

                        }
                    ) {
                        Text("hello")
                    }
                }
            }
        }
    }
}

@Composable
fun MySheet() {
    Column {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(600.dp)
        )
    }
}

RESULT