How to display a Dialog in Compose Multiplaform

[ferrandp]

Hi, I am trying to display a Dialog in a Compose Multiplaform project. I have found multiple code examples looking like this :

    Dialog(onDismissRequest = { /*TODO*/ }) {
        Card {
            Text("Some random text", Modifier.padding(24.dp))
        }
    }

My IDE shows errors with this code and can't find imports, but when I copy/paste the imports and run the Android app, everything works as expected. However when I try to run the Desktop app, I get some compilation issues :

e: Cannot find a parameter with this name: onDismissRequest
e: No value passed for parameter 'create'
e: No value passed for parameter 'dispose'

I am using Compose version 1.1.1 and in the common dependencies, I have

api(compose.runtime)
api(compose.foundation)
api(compose.material)
api(compose.ui)

What am I missing?

[amparhizgar]

This is because you don't pass required parameters. use this code:

val dialogState = remember { mutableStateOf(false) }
Button(onClick = { dialogState.value = true }) {
      Text("show dialog")
}
Dialog(visible = dialogState.value, onCloseRequest = { dialogState.value = false }) {
      Text("dialog content")
}

[ferrandp]

Thanks for your answer. Unfortunately, this code does not work neither on Android nor on Desktop. Nothing shows on desktop, whereas I get a compilation issue when trying to build the Android application:

e: Cannot find a parameter with this name: visible

The IDE does not even put the Dialog Composable in autocompletion when I start typing, so it is not a problem of parameters.

[sdercolin]

Please configure your build.gradle.kts according to the projects in examples.

If you are creating app only for desktop you can check this.

Use compose.desktop.currentOs:

plugins {
    ...
    id("org.jetbrains.compose")
}

...

dependencies {
    implementation(compose.desktop.currentOs)
    ...
}

You may also have to check files like gradle.properties and settings.gradle.kts.

[Burtan]

I think it is strange, that the Dialog API differs discretely on Android and desktop

        // Desktop
        Dialog(
            onCloseRequest = {}
        ) {
            Content()
        }

        // Android
        Dialog(
            onDismissRequest = {},
            content = {
                Content()
            }
        )

[wwalkingg]

// Android Dialog( onDismissRequest = {}, content = { Content() } )

We still need to wrap it with another layer ourselves?

[h0tk3y]

It has been almost a year since this issue has been opened. What is the recommended solution for the discrepancy in the Compose Multiplatform vs JetPack Compose APIs in onCloseRequest and onDismissRequest?

[cainan]

I was able to create a dialog with a edit text to edit a information. however I dont know how to return this editted string to the window that called the popup?

[MatkovIvan]

Regarding initial topic: we're investigating how to "commonize" API like that. For now it differs between Android and Multiplatform, yes.

@cainan I guess like in regular case with TextField - using remember/state outside or passing your own callback