0
364
ViewsHow to make a preview of a dialog in jetpack compose?
I have this code:
@Composable
fun SomeDialog() {
Dialog(onDismissRequest = { }, properties = DialogProperties()) {
....
}
}
@Preview(showBackground = true)
@Composable
fun SomeDialogPreview() {
MyTherapyPreviewTheme {
Scaffold {
SomeDialog()
}
}
}
I expected that this preview will generate a preview similar to other composable functions, but instead of this I only see a white rectangle in the preview (pure Scaffold).
How can I generate a preview of dialog in a proper way? Or maybe I can only make a preview of the content of the dialog in a separate function?
3 answers
Answer question
0
@MihaiBC is spot-on about why you can not preview (yet). Meanwhile, you can preview dialog content by extracting content of dialog in to a separate composable.
For example, if your dialog looks like this:
@Composable
fun SomeDialog() {
Dialog(onDismissRequest = { }, properties = DialogProperties()) {
Card(modifier = Modifier.fillMaxWidth()) {
.....
}
}
}
then extract content as following:
@Composable
fun SomeDialog() {
Dialog(onDismissRequest = { }, properties = DialogProperties()) {
SomeDialogContent()
}
}
@Composable
fun SomeDialogContent(){
Card(modifier = Modifier.fillMaxWidth()) {
.....
}
}
and finally preview this SomeDialogContent with some padding:
@Preview
@Composable
fun PreviewSomeDialogContent() {
AppTheme {
Box(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.background)
.padding(20.dp),
contentAlignment = Alignment.Center,
) {
SomeDialogContent({})
}
}
}
0
There is one more way to see the preview, but this time it will be on your live or simulator device.
In the preview window find a Deploy Preview button, which will build your preview on the phone.
Note that only this composable will be built.