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,
               
            )}}}

OneDev · Accepted Answer · 2022-01-29T18:00:49.867

0

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()
                }
            }
        )
    }
}

edited Jan 29 '22 at 18:00

answered Jan 29 '22 at 11:19

OneDev

557
3
14

tnx for ur answer, but can u pls answer according to question, is it possible to apply for question – Jan 29 '22 at 11:52
Yes, i wrote an answer an example for you, just implement in your project as you want. If you want to handle click listener of two button, just write your code inside text1ButtonOnClick and text2ButtonOnClick method – OneDev Jan 29 '22 at 12:13
I am not get it ur answer, sorry – Jan 29 '22 at 12:16
You want your bottom sheet to have 2 TextButton, isn't that right? – OneDev Jan 29 '22 at 12:22
no I have two button and I want to use botton sheet for those bottons , both button located on row, I have to apply for 2 or more button that bottom sheet – Jan 29 '22 at 12:37
Do you want to show the bottom sheet with these buttons? – OneDev Jan 29 '22 at 12:40
yes sure I want to use it for two text – Jan 29 '22 at 13:06
If you see my answer, i wrote it for you, just in onClick of your button change the state of your bottom sheet, scope.launch { sheetState.bottomSheetState.expand() } – OneDev Jan 29 '22 at 13:46
as I said I am not understand ur answer, it is not related to my question – Jan 29 '22 at 14:11
Ok, i use your code, and edit for you – OneDev Jan 29 '22 at 14:13
I edit My Answer and use your code, just I edit and it's what you want – OneDev Jan 29 '22 at 14:25
tnx so much for ur answer, but I have two row and every row have one text, when I click the any text I want to open bottom sheet, but every text have own screen view – Jan 29 '22 at 14:35
Ok I update it again – OneDev Jan 29 '22 at 15:48
I update my answer, please check if that is what you want, I hope it can help you – OneDev Jan 29 '22 at 16:07
my big problem here, sheetContent = { BottomSheetFirstScreen() }, I will add second screen to here also? – Jan 29 '22 at 16:29
when I click the name1 one screen will open, but when I click name2 it will open other bottom sheet screen – Jan 29 '22 at 16:32
You mean, you want different screen per click on text for bottomsheet? – OneDev Jan 29 '22 at 16:35
yes definitely, I want like that – Jan 29 '22 at 16:42
ok so you want your bottom sheet content change per click, ok I wrote it for you – OneDev Jan 29 '22 at 17:13
I update my answer again, I think it is what you want – OneDev Jan 29 '22 at 18:01
I understand now, tnx so so much, ur help appreciated. :)) – Jan 29 '22 at 18:28
1

I am glad to be helpful :) – OneDev Jan 29 '22 at 18:43
tnx so so much :) – Jan 29 '22 at 18:50

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

1 Answers1