Hello there! I'm working on a Compose Multiplatfor...

# multiplatform

[Menno Wellner]

Hello there! I'm working on a Compose Multiplatform project which for now is only an dekstop application which is running in the background, so minimum UI elements. Currently the project only has a tray menu, about dialog and error dialog I'm struggling to create a reusable dialog for the error dialog.
If I'm understanding CMP correctly I can have a like:

@Composable
fun ErrorDialog(title: String, message: String, onDismiss: () -> Unit)

Compose should be able to recompose the dialog when the value message changes. I'm using an dialog manager to update the values of title and message , and wether the dialog is visible with this function:

@Composable
fun DialogHost() {
    val dialogState by remember { mutableStateOf(dialogState) }

    if (dialogState.value) {
        ErrorDialog(title, message) { dialogState.value = false }
    }
}

However, in my case it does update the value of message as I can see different text displayed when another error occurs, but the size/state of the dialog is not updated. This causes the dialog to be too small for all the content it needs to show and thus disappear on the bottom side of the dialog.

Anyone an idea why this happens, and how to fix or has a different approach to a reusable dialog with dynamic content?

[Csaba Szugyiczki]

The same problem exists with Android Dialogs in Compose.
There is a usePlatformDefaultWidth dialog property, which used to lead to this behaviour. Not sure if there is something similar, that you could change

[Menno Wellner]

Thanks for the response, I've seen that suggestion as well, tried it and unfortunately did not work for me 😢

[Menno Wellner]

To be able to use that property I also would need to use it like:

Window(
  onCloseRequest = onDismiss
) {
    Dialog(
      onDismissRequest = onDismiss,
      properties = DialogProperties(usePlatformDefaultWidth = false)
    ) { /* Dialog content */ }
}

This does actually show the dialog correctly but the dialog is pretty big. So I then add this to the Window element:

state = rememberWindowState(
  size = DpSize(350.dp, Dp.Unspecified))

According to the documentation setting Dp.Unspecified would set the height of the window to the correct size depending on the content it needs to show. However, doing so I'm just shown a floating window header 😂 🤦‍♂️

Then I thought lets follow the other route using the DialogWindow block, but this results as described my initial post. Using the DialogWindow like:

@Composable
fun ErrorDialog(title: String, message: String, onDismess: () -> Unit) {
  DialogWindow(
    onCloseRequest = onDismiss,
    title = title,
    alwaysOnTop = true,
    resizable = false,
    state = rememberDialogState(
      position = WindowPosition(Alignment.Center),
      height = Dp.Unspecified
    )
  ) { /* Dialog content */ }
}

[Menno Wellner]

Additionally I've this as content:

Column(
  modifier = Modifier
    .fillMaxWidth()
    .wrapContentHeight(),
  verticalArrangement = Arrangement.Center,
  horizontalAlignment = Alignment.CenterHorizontally
) {
  Text(
    text = message,
    textAlign = TextAlign.Center,
    modifier = Modifier.padding(10.dp)
  )
  Button(
    onClick = onDismiss,
    modifier = Modifier
      .padding(vertical = 10.dp)
      .width(125.dp),
    colors = ButtonDefaults.buttonColors(
      backgroundColor = Color(0, 149, 225),
      contentColor = Color.White
    )
  ) {
    Text(
      text = "Ok",
      fontSize = 12.sp,
      fontWeight = FontWeight.Light,
      textAlign = TextAlign.Center,
    )
  }
}