Dialog

Component in Compose Ui

Opens a dialog with the given content.

A dialog is a small window that prompts the user to make a decision or enter additional information. A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed.

The dialog is visible as long as it is part of the composition hierarchy. In order to let the user dismiss the Dialog, the implementation of [onDismissRequest] should contain a way to remove the dialog from the composition hierarchy.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.8.0-alpha04")
}

Overloads

@Composable
fun Dialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties = DialogProperties(),
    content: @Composable () -> Unit
)

Parameters

name	description
onDismissRequest	Executes when the user tries to dismiss the dialog.
properties	[DialogProperties] for further customization of this dialog's behavior.
content	The content to be displayed inside the dialog.

@Composable
fun Dialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties,
    content: @Composable () -> Unit
)

Parameters

name	description
onDismissRequest	Executes when the user tries to dismiss the dialog.
properties	[DialogProperties] for further customization of this dialog's behavior.
content	The content to be displayed inside the dialog.

Code Example

DialogSample

@Composable
fun DialogSample() {
    val openDialog = remember { mutableStateOf(true) }
    val dialogWidth = 200.dp
    val dialogHeight = 50.dp

    if (openDialog.value) {
        Dialog(onDismissRequest = { openDialog.value = false }) {
            // Draw a rectangle shape with rounded corners inside the dialog
            Box(Modifier.size(dialogWidth, dialogHeight).background(Color.White))
        }
    }
}