The code presented in this article is using compose rc01
Jetpack Compose brings us with a cool new UI toolkit, but some things are completely different from how we are used to it, one of these cases is AlertDialog
a common component on any application.
Steps to display an AlertDialog on compose:
- Create a state as a flag to check if we need to show the dialog or not.
var showDialog by remember { mutableStateOf(false) }
You may need to import:
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
Basic AlertDialog:
if (showDialog) {
AlertDialog(
onDismissRequest = { },
title = { },
text = { },
confirmButton = { },
dismissButton = { },
)
}
Let's see what's each param of AlertDialog
composable method:
onDismissRequest = { },
Will be called when clicking outside of a dialog, here we must set
showDialog
tofalse
to remove it from our stack.
title = { },
text = { },
Add a
Text
to show a title and message of ourAlertDialog
confirmButton = { },
dismissButton = { },
Define a
Button
orTextButton
and itsText
to get actions like "Accept" or "Cancel"
When click on confirm or button we must set our showDialog
to false also, to avoid showing the dialog on the next recomposition.
onDismissRequest = { showDialog = false },
confirmButton = { showDialog = false },
dismissButton = { showDialog = false },
Other dialogs
What if we want to display custom content, like a list of items to select one?
text = {
LazyColumn {
items(...) { item -> Text(text = item) }
}
},
Use the text
field of AlertDialog
to display any content that is needed and handle the dialog in the same way of buttons: showDialog = false
.
Hope you enjoyed the article!
Top comments (0)