Kotlin Desktop App from Scratch: Compose + Material3 | Lesson 01

Kotlin Desktop App from Scratch: Compose + Material3 | Lesson 01

In this lesson, you’ll learn how to set up a Kotlin Compose Multiplatform desktop project manually using Gradle and write a simple "Hello World" app with a clickable counter. We’ll configure the Compose Desktop plugin, apply Material3 dark theme, and manage UI state with Compose’s reactive tools.

Code

import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

fun main() = application {
  // Create a window with a title
  Window(onCloseRequest = ::exitApplication, title = "Hello Compose") {
    // Apply Material3 dark theme
    MaterialTheme(colorScheme = darkColorScheme()) {
      // Call our composable function to display UI
      HelloCounter()
    }
  }
}

@Composable
fun HelloCounter() {
  // remember mutable state for the click count
  var count by remember { mutableStateOf(0) }

  // Display a button with the current count
  Button(onClick = { count++ }) {
    Text("Hello Compose! Clicked $count times")
  }
}

Key Points

• Kotlin Compose Multiplatform enables building native desktop apps running on the JVM with reactive UI.
• Gradle plugins simplify project setup and dependency management for Compose Desktop applications.
• @Composable functions declare UI components that automatically update when state changes.
• Use remember and mutableStateOf to hold and update UI state across recompositions.
• Material3 provides ready-to-use themes and components, including a dark color scheme for modern UI styling.