Dialogs provide important prompts in a user flow.
AlertDialogSample
@Preview
@Composable
fun AlertDialogSample() {
val openDialog = remember { mutableStateOf(true) }
Button(onClick = { openDialog.value = true }) { Text("Open dialog") }
if (openDialog.value) {
AlertDialog(
onDismissRequest = {
// Dismiss the dialog when the user clicks outside the dialog or on the back
// button. If you want to disable that functionality, simply use an empty
// onDismissRequest.
openDialog.value = false
},
title = { Text(text = "Title") },
text = { Text(text = "Turned on by default") },
confirmButton = {
TextButton(onClick = { openDialog.value = false }) { Text("Confirm") }
},
dismissButton = {
TextButton(onClick = { openDialog.value = false }) { Text("Dismiss") }
},
)
}
}
AlertDialogWithIconSample
@Preview
@Composable
fun AlertDialogWithIconSample() {
val openDialog = remember { mutableStateOf(true) }
Button(onClick = { openDialog.value = true }) { Text("Open dialog") }
if (openDialog.value) {
AlertDialog(
onDismissRequest = {
// Dismiss the dialog when the user clicks outside the dialog or on the back
// button. If you want to disable that functionality, simply use an empty
// onDismissRequest.
openDialog.value = false
},
icon = {
Icon(
Icons.Filled.Favorite,
contentDescription = null,
modifier = Modifier.size(AlertDialogDefaults.IconSize),
)
},
title = { Text(text = "Title") },
text = {
Text(
"This area typically contains the supportive text " +
"which presents the details regarding the Dialog's purpose."
)
},
confirmButton = {
TextButton(onClick = { openDialog.value = false }) { Text("Confirm") }
},
dismissButton = {
TextButton(onClick = { openDialog.value = false }) { Text("Dismiss") }
},
)
}
}
BasicAlertDialogSample
@Preview
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BasicAlertDialogSample() {
val openDialog = remember { mutableStateOf(true) }
Button(onClick = { openDialog.value = true }) { Text("Open dialog") }
if (openDialog.value) {
BasicAlertDialog(
onDismissRequest = {
// Dismiss the dialog when the user clicks outside the dialog or on the back
// button. If you want to disable that functionality, simply use an empty
// onDismissRequest.
openDialog.value = false
}
) {
Surface(
modifier = Modifier.wrapContentWidth().wrapContentHeight(),
shape = MaterialTheme.shapes.large,
tonalElevation = AlertDialogDefaults.TonalElevation,
) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text =
"This area typically contains the supportive text " +
"which presents the details regarding the Dialog's purpose."
)
Spacer(modifier = Modifier.height(24.dp))
TextButton(
onClick = { openDialog.value = false },
modifier = Modifier.align(Alignment.End),
) {
Text("Confirm")
}
}
}
}
}
}