How to apply bottom sheet for multiple text in jetpack compose?

Question

I am try to learning jetpack compose those days, so I want to learning bottom sheet in jetpack compose, I do it just for one text, but I want to use it for multiple text, I have one example here, but I am not sure how to implement to my project, is there any solution for more than two text button to apply bottom sheet?

@Composable
fun BottomSheetMyScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(initialValue = 
  ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetContent = {
            BottomSheetFirstScreen()
         

        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp),
        sheetBackgroundColor = Color.Red,
       
    ) {
        Scaffold(

            backgroundColor = Color.Red
        ) {
            MyScreen(
                scope = scope, state = modalBottomSheetState

            )}}}
 
@Composable
fun MyScreen(
    scope: CoroutineScope, state: ModalBottomSheetState,

) {

            MainRow(
                name = "name1",
                onClick = {  scope.launch {
                    state.show()
                }}
            )

            MainRow(
                name = "name2",
                onClick = { scope.launch {
                    state.show()
                } }

            )}}
     
@Composable
fun MainRow(
    name: String,
    onClick: () -> Unit

    ) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .clickable(onClick = onClick),
        verticalAlignment = Alignment.CenterVertically
    ) {

        Column(
            modifier = Modifier
                .width(150.dp)

           ) {

            Text(
                text = name,
               
            )}}}
           
     

Answer 1

I edit Your Code, you can use this code:

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetMyScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(
        initialValue =
        ModalBottomSheetValue.Hidden
    )
    val scope = rememberCoroutineScope()
    val sheetContentState = remember {
        mutableStateOf(0)
    }
    ModalBottomSheetLayout(
        sheetContent = {
            when (sheetContentState.value) {
                0 -> {
                    BottomSheetFirstScreen()
                }
                1 -> {
                    BottomSheetSecondScreen()
                }
            }
        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 5.dp, topEnd = 5.dp),
        sheetBackgroundColor = Color.Red,
    ) {
        Scaffold(
            backgroundColor = Color.Red
        ) {
            MyScreen(
                scope = scope, state = modalBottomSheetState, sheetContentState = sheetContentState
            )
        }
    }
}

Main Row

@Composable
fun MainRow(
    name: String,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = name,
            modifier = Modifier.clickable { onClick.invoke() }
        )
    }
}

And MyScreen

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MyScreen(
    scope: CoroutineScope,
    state: ModalBottomSheetState,
    sheetContentState: MutableState<Int>
) {
    Column(modifier = Modifier.fillMaxWidth()) {
        MainRow(
            name = "name 1",
            onClick = {
                scope.launch {
                    sheetContentState.value = 0
                    state.show()
                }
            }
        )
        MainRow(
            name = "name 2",
            onClick = {
                scope.launch {
                    sheetContentState.value = 1
                    state.show()
                }
            }
        )
    }
}