Alternative implementation of an alert dialog displaying Android-style popup with fade animations. Supports customization of window decorations and accommodates overlapping UI elements.
An alternative implementation of AlertDialog for Compose Multiplatform that shows an Android-style popup dialog with fade-in and fade-out animations.
Supported platforms:
Add the dependency to your commonMain source set:
sourceSets {
val commonMain by getting {
dependencies {
implementation("dev.zwander:composedialog:VERSION")
}
}
}
Use the InWindowAlertDialog Composable in your code.
var showingDialog by remember {
mutableStateOf(false)
}
Surface {
Column {
// ...
}
}
InWindowAlertDialog(
showing = showingDialog,
onDismissRequest = { showingDialog = },
title = { Text(text = ) },
text = { Text(text = ) },
buttons = {
TextButton(
onClick = {
showingDialog =
},
) {
Text(text = )
}
},
shape = MaterialTheme.shapes.extraLarge,
backgroundColor = MaterialTheme.colorScheme.surface,
contentColor = contentColorFor(MaterialTheme.colorScheme.surfaceVariant),
maxWidth = dp,
windowDecorations = LocalWindowDecorations.current,
modifier = Modifier,
)
If you have any window decorations (status bar, navigation bar, title bar, etc.) that the dialog overlaps with when it's shown, you can provide a LocalWindowDecorations value with the insets for the dialog to avoid.
You can also pass a DpRect value directly to a specific dialog with the windowDecorations argument.
Note that while DpRect uses absolute left/right values, they are used as relative start/end values.
CompositionLocalProvider(
LocalWindowDecorations provides DpRect(
left = /* ... */,
top = /* ... */,
right = /* ... */,
bottom = /* ... */,
),
) {
InWindowAlertDialog(
// ...
)
}
Surfaced from shared tags and platforms — no rankings paid for.