Material3 ModalBottomSheet How to set fullscreen background image

Question

I am trying to implement a ModalBottomSheet with Material3. Everything works like expected but I don't get colored the area which google called container. Or more precisely: I would like to have a background image.

I do not care if the ModalBottomSheet has the background image or the element inside.

I tried something like that

        ModalBottomSheet(
            sheetState = sheetState,
            content = {
                Surface(modifier = Modifier.fillMaxSize()) {
                    Image(
                        painter = painterResource(id = R.drawable.app_background),
                        contentDescription = null,
                        modifier = Modifier
                            .fillMaxSize(),
                        contentScale = ContentScale.Crop
                    )
                }
            },
            onDismissRequest = {
                pressedBack.invoke()
            },
            modifier = Modifier
                .fillMaxSize(),
            tonalElevation = 20.dp,
        )
    

Does anybody know how I can manipulate this area? I cannot find anything.

Answer 1

The area is called drag handle.

You can set that to null, like this:

    ModalBottomSheet(
    sheetState = sheetState,
    content = {
        Surface(modifier = Modifier.fillMaxSize()) {
            Image(
                painter = painterResource(id = R.drawable.app_background),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxSize(),
                contentScale = ContentScale.Crop
            )
        }
    },
    onDismissRequest = {
        pressedBack.invoke()
    },
    modifier = Modifier
        .fillMaxSize(),
    tonalElevation = 20.dp,
    dragHandle = null,
    //or set that to empty 
    // or any composables you want
    //dragHandle = {}
)