Compose Multi-Platform Dialog Windows

Simple Dialog

This is the main window Here is some additional information

A dialog pop-up window is a child of the main window. Dialogs are modal, meaning that they sit in front of the main window and must be closed before the user can interact with the main window again.

Dialogs can be easily shown / hidden through the use of a boolean state variable created via mutableStateOf(...). See the State page for more information on these.

Dialogs are laid out and can contain the same elements as a normal window.

fun main() = singleWindowApplication(
    title = "Window with Dialog",
) {
    App()
}

var isDialogOpen by  mutableStateOf(false)

@Composable
fun App() {

    Column() {
        Text("This is the main window")

        Button(
            onClick = { isDialogOpen = true }
        ) {
            Text(text = "See Extra Info")
        }
    }

    if (isDialogOpen) {
        Dialog()
    }
}

@Composable
fun Dialog() = DialogWindow(
    title = "Extra Info",
    state = DialogState(width = 300.dp, height = 200.dp),
    onCloseRequest = { isDialogOpen = false }
) {
    Column() {
        Text("Here is some additional information")

        Button(
            onClick = { isDialogOpen = false }
        ) {
            Text(text = "Close")
        }
    }
}

Keyboard Closing of Dialog

This is the main window Here is some additional information ESC

Key presses can be used to open / close Dialog Windows. See the Key Events page for more information

In this example the button opens the dialog and the ESC key closes it. The dialog window handles the ESC key (since it has the focus when it is open).

fun main() = singleWindowApplication(
    title = "Window with Dialog",
) {
    App()
}

var isDialogOpen by mutableStateOf(false)

@Composable
fun App() {

    Column() {
        Text("This is the main window")

        Button(
            onClick = { isDialogOpen = true }
        ) {
            Text(text = "See Extra Info")
        }
    }

    if (isDialogOpen) {
        Dialog()
    }
}

@Composable
fun Dialog() = DialogWindow(
    title = "Extra Info",
    state = DialogState(width = 300.dp, height = 120.dp),
    onCloseRequest = { isDialogOpen = false },

    onPreviewKeyEvent = {
        if (
            it.key == Key.Escape &&
            it.type == KeyEventType.KeyDown
        ) {
            isDialogOpen = false
            true
        } else {
            false
        }
    }
) {
    Column() {
        Text("Here is some additional information")
    }
}