Android - Jetpack Compose - Blur background but not content of view (in dialog)

185 Views Asked by At

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?

0

There are 0 best solutions below