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?
You need to use BottomSheetScaffold
.