Preview of an AlertDialog doesn't work in Jetpack Compose

Question

Problem description

I'm trying to see a preview of my AlertDialog in compose but I'm not getting it, the preview doesn't render it even though it doesn't show any error. I'm sure the problem is only with this composable function because I can see the preview of other functions normally.

Warning

I'm getting this warning, but I don't understand very well if it's a problem that doesn't render my dialog.

Works normally in runtime

My dialog appears normally in an execution environment, which leads me to believe that it is really a problem with the preview function:

My code

Compose related versions

I'm using build.gradle.kts files and I reference my compose related versions like this:

object Compose {
    const val composeVersion = "1.0.5"
    const val composeCompilerVersion = "1.0.5"
    const val material = "androidx.compose.material:material:$composeVersion"
    const val ui = "androidx.compose.ui:ui:$composeVersion"
    const val uiTooling = "androidx.compose.ui:ui-tooling:$composeVersion"
    const val uiToolingPreview = "androidx.compose.ui:ui-tooling-preview:$composeVersion"
    const val runtime = "androidx.compose.runtime:runtime:$composeVersion"
    const val compiler = "androidx.compose.compiler:compiler:$composeCompilerVersion"

    private const val navigationVersion = "2.4.0-beta02"
    const val navigation = "androidx.navigation:navigation-compose:$navigationVersion"

    private const val hiltNavigationComposeVersion = "1.0.0-beta01"
    const val hiltNavigationCompose = "androidx.hilt:hilt-navigation-compose:$hiltNavigationComposeVersion"

    private const val activityComposeVersion = "1.4.0"
    const val activityCompose = "androidx.activity:activity-compose:$activityComposeVersion"

    private const val lifecycleVersion = "2.4.0"
    const val viewModelCompose = "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycleVersion"
}

Component that renders the dialog

@Composable
fun InvalidValuesDialog(
    @StringRes title: Int,
    @StringRes message: Int,
    @StringRes buttonText: Int,
    checkBoxIsChecked: Boolean,
    onCheckChange: () -> Unit,
    onDismissRequest: () -> Unit,
    buttonClick: () -> Unit,
) {
    val spaces = LocalSpacing.current
    AlertDialog(
        onDismissRequest = onDismissRequest,
        title = {
            Text(
                text = stringResource(id = title),
                fontSize = 20.sp
            )
        },
        text = {
            Column {
                Text(
                    text = stringResource(id = message),
                    fontSize = 18.sp
                )
                VerticalSpacer(spaces.small)
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Checkbox(checked = checkBoxIsChecked, onCheckedChange = { onCheckChange() })
                    HorizontalSpacer(spaces.extraSmall)
                    Text(
                        modifier = Modifier.clickable { onCheckChange() },
                        text = stringResource(id = R.string.keep_value_informed),
                        fontSize = 16.sp
                    )
                }
            }
        },
        buttons = {
            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = buttonClick
            ) {
                Text(text = stringResource(id = buttonText))
            }
        }
    )
}

Preview function

@Composable
@Preview
fun InvalidValuesDialogCheckedPreview() {
    CalorieTrackerTheme {
        InvalidValuesDialog(
            title = R.string.high_height,
            message = R.string.high_height_message,
            buttonText = R.string.next,
            checkBoxIsChecked = true,
            onCheckChange = {},
            onDismissRequest = {},
            buttonClick = {}
        )
    }
}

Preview result

My attempt fails

I figured the dialog might not be rendering due to it not being big enough to show on the screen. So I decided to put it inside a Box with maximum screen size, but it still didn't work.

@Composable
@Preview(showBackground = true)
fun InvalidValuesDialogCheckedPreview() {
    CalorieTrackerTheme {
        Box(modifier = Modifier.fillMaxSize()) {
            InvalidValuesDialog(
                title = R.string.high_height,
                message = R.string.high_height_message,
                buttonText = R.string.next,
                checkBoxIsChecked = true,
                onCheckChange = {},
                onDismissRequest = {},
                buttonClick = {}
            )
        }
    }
}

Attempt fails result

Answer 1

The preview window doesn't support multiple windows I think the error is valid, and it is not possible still to see Toast or snackbar either in the preview or preview interactive mode.

BTW, I think when you're using androidx.compose.ui:ui-tooling you don't need anymore to androidx.compose.ui:ui-tooling-preview