TL-DR -> How can I ensure that the snackbar remains visible and not hidden behind the modal bottom s...

# compose

[Alperen]

TL-DR -> How can I ensure that the snackbar remains visible and not hidden behind the modal bottom sheet? What is the reason of it?

I'm creating a Snackbar using snackbarHost and snackBarHostState in a Scaffold. Additionally, in the content of the Scaffold, I conditionally include or remove a ModalBottomSheet based on a boolean value. My goal is to display the Snackbar while the ModalBottomSheet is visible. I can see the Snackbar when I dismiss the bottom sheet, but I can't see it while the bottom sheet is open. I tried adding zIndex(1000f) to the modifier of SnackbarHost. I also tried wrapping SnackbarHost in a Popup and a Box, but none of these solutions worked. How can I display the Snackbar above the ModalBottomSheet? And what is the reason of this situation? The structure of my code is similar to the following. (btw I use material3 library)

Scaffold(
        modifier = Modifier,
        snackbarHost = { SnackbarHost(snackBarHostState) },
        ...
    ) { 

        LaunchedEffect(key1 = message) {
            snackBarHostState.showSnackbar(
                message = message,
                duration = SnackbarDuration.Long
                )
            }

        ...

        if (showBottomSheet) {
            ModalBottomSheet(...) 
        }
    }

[Chrimaeon]

A modal bottom sheet is like a dialog. It’s drawn in its own “window” on top of the current window. The snackbar though is just like any composable.

[Alperen]

Hmm so I have to create a snackbar inside of a modal bottom sheet.

[Chrimaeon]

That should work. 🤷‍♂️ not sure about the UX though.

[Suhaib Kazi]

Use a BottomSheetScaffold with support for snackbar?
Just a thought

[Alperen]

BottomSheetScaffold does not have support for modal bottom sheet.