androidandroid-jetpack-composebottom-sheetandroid-snackbar

Jetpack compose snackbar hidden behind bottomsheet


I show a SnackBar inside Scaffold like this:

val scaffoldState = rememberScaffoldState()

LaunchedEffect(offerViewModel.onAddToCartError) {
    offerViewModel.onAddToCartError = {
        coroutineScope.launch {
            scaffoldState.snackbarHostState.showSnackbar(
                message = message
            )
        }
    }
}
Scaffold(
    Modifier.nestedScroll(nestedScrollConnection),
    scaffoldState = scaffoldState,
    snackbarHost = {
        SnackbarHost(it) { data ->
            ErrorSnackBar(
                message = data.message,
                fontSize = 16.sp
            )
        }
    }) { paddingValues ->
    Box(
        modifier = Modifier
            .padding(paddingValues)
            .fillMaxSize()
    ) {
        //content
        // full screen ModalBottomSheet
        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = modifier,
                windowInsets = WindowInsets(
                    bottom = bottomInsets.getBottom(density).pxToDp().dp,
                    top = topInsets.getTop(density).pxToDp().dp
                )
            ){...}
        }
    }
}

but if the ModalBottomSheet is shown, it covers my SnackBar. How can I show the SnackBar over all content including bottom sheets on my screen?


Solution

  • You need to use BottomSheetScaffold.