5

I have the following composable bottomsheet.

I want to be able to close the bottomsheet either by dragging, clicking the background, and clicking the close button.

@Composable
fun CDSModelBottomSheet(toolBar: @Composable () -> Unit, content: @Composable () -> Unit) {
    val modelBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Expanded
    )

    ModalBottomSheetLayout(
        sheetState = modelBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
        sheetContent = {
            Column {
                toolBar()
                content()
            }
        }
    ) {}
}

@Composable
@Preview
fun PreviewCDSBottomSheet() {
    CDSModelBottomSheet(
        toolBar = { Toolbar(
            title = "Select Account",
            trailingIcon = {
                IconButton(
                    modifier = Modifier.size(24.dp),
                    onClick = {
                        /* close bottom sheet */
                    }
                ) {
                    Icon(
                        imageVector = Icons.Filled.Close,
                        contentDescription = stringResource(R.string.close_bottom_sheet),
                        tint = Color.Black,
                    )
                }
            })},
        content = {
            LoginMode()
        }
    )
}

In the trailingIcon I have an onClick event. But not sure how to trigger the bottomsheet to close. Unless I have to pass in the rememberModelBottomSheetState which I don't want to do.

This is the preview enter image description here

1 Answer 1

5

Create a lambda to hide ModalBottomSheet as

val coroutineScope = rememberCoroutineScope()
val hideModalBottomSheet: () -> Unit = { coroutineScope.launch { sheetState.hide()} }

And pass this lambda as parameter to your content by updating toolbar as

toolbar: @Composable (() -> Unit) -> Unit

Full function

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CDSModelBottomSheet(
    toolBar: @Composable (() -> Unit) -> Unit,
    content: @Composable () -> Unit
) {

    val modelBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Expanded
    )

    val coroutineScope = rememberCoroutineScope()
    val hideModalBottomSheet: () -> Unit =
        { coroutineScope.launch { modelBottomSheetState.hide() } }


    ModalBottomSheetLayout(
        sheetState = modelBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
        sheetContent = {
            Column {
                toolBar(hideModalBottomSheet)
                content()
            }
        }
    ) {}
}

And use it as

CDSModelBottomSheet(
    toolBar = { hide: () -> Unit ->
        Toolbar(
            title = "Select Account",
            trailingIcon = {
                IconButton(
                    modifier = Modifier.size(24.dp),
                    onClick = hide
                ) {
                    Icon(
                        imageVector = Icons.Filled.Close,
                        contentDescription = "Close",
                        tint = Color.Black,
                    )
                }
            }
        )
    },
    content = {
        LoginMode()
    }
)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.