Hello Kotlinlang! Im having issues in Compose multiplatform to display a `toast` on top of a `modal...

# compose

[Calle Höglund]

Hello Kotlinlang!

Im having issues in Compose multiplatform to display a toast on top of a modalBottomSheet. I've tried messing with z-indexes without any success. Im using Scaffold to display the toasts thru the snackbarhost.
Both the Scaffold and the ModalBottomSheet are from material3.

Has anyone stumbled upon a similar problem? Any suggestions or solutions?

[Tgo1014]

Are you triggering the toast from the bottom sheet or from some view behind? I think because the bottomsheet is in a different window, the z index doesn't work in this case. 🤔

Recently I had the same issue and what I had to do was to trigger it from the bottomsheet instead of the view behind it

[Ernestas]

Ran into the same issue, resolved it the same way as Tiago, the snackbar has to be called from the bottom sheet itself

# Usage:
ModalBottomSheet(
    <...>
    snackbarHostState = snackbarHostState,
) {...}

# ModalBottomSheet.kt
@Composable
fun ModalBottomSheet(
    snackbarHostState: SnackbarHostState = rememberSnackbarHostState(),
    content: @Composable ColumnScope.() -> Unit,
    <...>
) {
        MaterialModalBottomSheet(
            <...>
        ) {
            Box {
                Column(modifier = Modifier.padding(contentPadding)) {
                    content()
                    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars))
                }
                SnackbarHost(
                    snackbarHostState = snackbarHostState,
                    modifier =
                        Modifier
                            .align(Alignment.BottomCenter)
                            .navigationBarsPadding()
                            .padding(...),
                ) { snackbarVisuals ->
                    Snackbar(snackbarVisuals)
                }
            }
        }
    }
}

[Calle Höglund]

Hmm interesting! Thanks a lot for the answers yall ❤️

[Calle Höglund]

However this toast that im trying to present can occur whenever really in that specific view. So I don't know if a bottomsheet is presented or not. Kinda looking for a more dynamic solution...

[Ernestas]

You could potentially reuse the same snackbar state for screen/bottom sheet level composables (basically duplicating the snackbar) so that it handles both cases. If you find a better solution please share 😄

[Calle Höglund]

Yeah that was my thought too. It did work but the toast is duplicated, since the host is shared in two composables

[Calle Höglund]

Small update. Using a BottomSheetScaffold solved the problem with the Toast not showing up (drawn on top of bottom sheet when showing). However using it comes with a few drawbacks.
• No way of setting a scrimColor (the dimmed view behind a visible bottomsheet)
• No support to dismissed the sheet with a tap outside of it (solvable with pointerInput hack)