Kotlin Desktop Dialogs & Menus: AlertDialog, DropdownMenu & MenuBar | Tutorial #7

Kotlin Desktop Dialogs & Menus: AlertDialog, DropdownMenu & MenuBar

This tutorial demonstrates how to create interactive dialogs and menus in a Kotlin Compose Desktop application. You'll learn to implement AlertDialogs with input fields, DropdownMenus triggered by icon buttons, and native MenuBars with keyboard shortcuts, all managed through state variables.

Code

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyShortcut
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.*

@Composable
@Preview
fun App() {
  var showInfoDialog by remember { mutableStateOf(false) }
  var showInputDialog by remember { mutableStateOf(false) }
  var showDropdownMenu by remember { mutableStateOf(false) }
  var inputText by remember { mutableStateOf("") }

  MaterialTheme {
    // Native MenuBar with File and Help menus
    MenuBar {
      Menu("File") {
        Item("New", onClick = { showInputDialog = true }, shortcut = KeyShortcut(Key.N, meta = true))
        Item("Quit", onClick = { exitApplication() }, shortcut = KeyShortcut(Key.Q, meta = true))
      }
      Menu("Help") {
        Item("About", onClick = { showInfoDialog = true })
      }
    }

    Column(
      modifier = Modifier.fillMaxSize().padding(16.dp),
      verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
      Button(onClick = { showInfoDialog = true }) {
        Text("Show Info Dialog")
      }
      Button(onClick = { showInputDialog = true }) {
        Text("Show Input Dialog")
      }
      Box {
        IconButton(onClick = { showDropdownMenu = true }) {
          Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
          expanded = showDropdownMenu,
          onDismissRequest = { showDropdownMenu = false }
        ) {
          DropdownMenuItem(onClick = {
            showInfoDialog = true
            showDropdownMenu = false
          }) {
            Text("About")
          }
          DropdownMenuItem(onClick = {
            showInputDialog = true
            showDropdownMenu = false
          }) {
            Text("New Input")
          }
          DropdownMenuItem(onClick = {
            exitApplication()
          }) {
            Text("Exit")
          }
        }
      }
    }

    // Info AlertDialog with confirm and dismiss buttons
    if (showInfoDialog) {
      AlertDialog(
        onDismissRequest = { showInfoDialog = false },
        title = { Text("About This App") },
        text = { Text("This is a Compose Desktop app demonstrating dialogs and menus.") },
        confirmButton = {
          TextButton(onClick = { showInfoDialog = false }) {
            Text("OK")
          }
        },
        dismissButton = {
          TextButton(onClick = { showInfoDialog = false }) {
            Text("Cancel")
          }
        }
      )
    }

    // Input AlertDialog with OutlinedTextField
    if (showInputDialog) {
      AlertDialog(
        onDismissRequest = { showInputDialog = false },
        title = { Text("Enter Your Name") },
        text = {
          OutlinedTextField(
            value = inputText,
            onValueChange = { inputText = it },
            label = { Text("Name") }
          )
        },
        confirmButton = {
          TextButton(onClick = {
            println("User input: $inputText")
            showInputDialog = false
            inputText = ""
          }) {
            Text("Submit")
          }
        },
        dismissButton = {
          TextButton(onClick = {
            showInputDialog = false
            inputText = ""
          }) {
            Text("Cancel")
          }
        }
      )
    }
  }
}

fun main() = application {
  Window(onCloseRequest = ::exitApplication, title = "Dialogs & Menus Demo") {
    App()
  }
}

Key Points

• AlertDialog provides modal popups with customizable titles, text content, and confirm/dismiss buttons.
• DropdownMenu is triggered by an IconButton and displays a list of clickable menu items.
• MenuBar creates native OS menus with Menu and Item components, supporting keyboard shortcuts.
• KeyShortcut binds keyboard combinations like Cmd+N and Cmd+Q to menu item actions for quick access.
• Boolean state variables (mutableStateOf) control the visibility of dialogs and menus, enabling reactive UI updates.