set background transparent in the bottomSheetScaffold

Question

I want to set a transparent background for bottomsheetscaffold in the jetpack compose but when I launch the app, the background is the default. how can I set a black transparent background to the jetpack compose bottom sheet? (Like BottomSheetDialogFragment in the xml)?

@Composable
fun BottomSheet(
    modifier: Modifier = Modifier,
    title: String,
    content: String,
    buttonText: String,
    composable: @Composable () -> Unit,
    isOpen: (Boolean) -> Unit
) {
    val coroutineScope = rememberCoroutineScope()
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    BottomSheetScaffold(
        sheetBackgroundColor = Color.Transparent,
        scaffoldState = bottomSheetScaffoldState,
        sheetGesturesEnabled = false,
        sheetContent = {
            Column(
                Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = title,
                    style = AppFont.PoppinsTypography.button
                )
                Spacer(modifier = modifier.size(8.dp))
                Text(
                    text = content,
                    style = AppFont.PoppinsTypography.body1
                )
                Spacer(modifier = modifier.size(16.dp))
                Button(colors = ButtonDefaults.buttonColors(
                    backgroundColor = AppColor.brandColor.BLUE_DE_FRANCE,
                    contentColor = AppColor.neutralColor.DOCTOR
                ),
                    shape = RoundedCornerShape(
                        small
                    ),
                    onClick = {
                        coroutineScope.launch {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                            isOpen.invoke(false)
                        }
                    }) {
                    Text(
                        text = buttonText,
                        style = AppFont.PoppinsTypography.button
                    )
                }
            }
        },
        sheetShape = RoundedCornerShape(topEnd = medium, topStart = medium),
        sheetPeekHeight = 0.dp,
        drawerGesturesEnabled = false
    ) {
        composable()
    }

}

user_17258709 · Answer

Try to change your sheetBackgroundColor = Color.Transparent to any color you want to use

Example as mentioned below in the comments:

@ExperimentalMaterialApi
@Composable
fun Sheet() {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    BottomSheetScaffold(
        sheetContent = {
            Box(modifier = Modifier.height(300.dp).fillMaxWidth().background(Color.Gray)) {
                LazyColumn(modifier = Modifier
                    .fillMaxSize()
                    .padding(10.dp)
                ) {
                    items(100) {
                        Text(text = "Sheet item $it")
                        Spacer(modifier = Modifier.height(10.dp))
                    }
                }
            }
        },
        scaffoldState = bottomSheetScaffoldState,
        sheetPeekHeight = 100.dp,
        sheetShape = RoundedCornerShape(10.dp),
        sheetBackgroundColor = Color.Transparent
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Green),
            contentAlignment = Alignment.Center
        ) { Text(text = "Content") }
    }
}

Now you could change Color.Green to Color.Transparent but I don't see why you would like to set this to Transparent.

set background transparent in the bottomSheetScaffold

1 Answers