I don't know where my background comes from-CodePudding

I have developed my bottom sheet in Compose.

The goal is to have the top of the bottom sheet (where the picture is) to be transparent to see the background picture. The rest of the bottom sheet with the text will have a background

Here is what I came up with:

@ExperimentalMaterialApi
@Composable
fun EntryFragment() {

    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberBottomSheetState(BottomSheetValue.Collapsed)
    )
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Box(
                Modifier
                    .fillMaxWidth()
                    .fillMaxHeight().background(Color.Transparent)
            ) {
                Column(Modifier.background(Color.Transparent)) {
                    Image(
                        painter = painterResource(R.drawable.main_screen_picture),
                        contentDescription = "Picture",
                        /*contentScale = ContentScale.Crop, */
                        modifier = Modifier.width(150.dp).height(150.dp)
                    )
                    Box(
                        Modifier
                            .fillMaxWidth()
                            .fillMaxHeight()
                            .background(Color.Blue)
                    ){
                        Text(text = "Hello from sheet")
                    }
                }

            }

        }, sheetPeekHeight = 600.dp
        , modifier = Modifier.background(Color.Green)
    ) {
        //Under the bottom sheet
        Image(
            painter = painterResource(R.drawable.main_screen_background),
            contentDescription = "Background",
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxWidth()
        )

    }
}

I have this issue where there is a white/black (depending on day/night) background put next to my picture.

Apparently it comes from the column, but everything has a transparent background. I put a green background in my bottom sheet, and it is not shown, so the issue must come from above.

Where this issue comes from?

CodePudding user response：

Try to put your background as a first Modifier because the order matters. For example:

Box(
            Modifier
                .background(Color.Transparent)
                .fillMaxWidth()
                .fillMaxHeight()
        )

CodePudding user response：

It's controlled by sheetBackgroundColor parameter of BottomSheetScaffold. As the next step you probably gonna need to disable shadows too:

sheetBackgroundColor = Color.Transparent,
sheetElevation = 0.dp,