I want to create a blurred background for a dialog. But the content of the dialog has to be normal (nor blurred)
Something like this: https://pasteboard.co/CQU79nPbifvs.png (I'm not able to upload image here)
I have this code:
@Composable
fun PremiumDialog(
onDismissRequest: () -> Unit,
onConfirm: () -> Unit
) {
var checked by rememberSaveable { mutableStateOf(true) }
Dialog(
onDismissRequest = onDismissRequest, properties = DialogProperties(
dismissOnBackPress = true, usePlatformDefaultWidth = false
)
) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.BottomCenter
) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(
top = 20.dp, end = 20.dp, start = 20.dp, bottom = 18.dp
) // Horní odsazení
.background(Color.Transparent),
backgroundColor = DialogBackgroundColor,
shape = DefaultDialogRoundedCorners,
border = BorderStroke(1.dp, Color.White.copy(0.20f)),
elevation = 0.dp
) {
}
}
}
}
}
I tried https://github.com/skydoves/Cloudy or Modifier.blur() but nothing works OK
I think it's related to Blur toolbar background on Jetpack compose
Is this possible in Compose? How can I achieve it?