How to make a preview of a dialog in jetpack compose?

Question

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?

Answer 1

@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({})
        }
    }
}

Answer 2

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.