Getting Started with Compose for Desktop: Build Your First App

Post Overview

1. Introduction to Compose for Desktop

• Compose for Desktop is an extension of Jetpack Compose that allows building desktop applications using Kotlin.
• Supports multiple platforms (Windows, macOS, Linux).
• Provides a modern UI development approach compared to Swing.

2. Setting Up the Environment

• Install JDK 17 or higher.
• Install IntelliJ IDEA (Ultimate or Community).
• Create a Gradle project and configure Compose for Desktop.

3. Building a Simple Sample App

• A basic GUI app that displays “Hello, Compose for Desktop!” with a button.

---

Creating a Simple Sample App

Here’s how to build a basic Compose for Desktop application.

---

1. Gradle Project Setup

Modify your build.gradle.kts file to include Compose for Desktop.

plugins {
    kotlin("jvm")
    id("org.jetbrains.compose")
    id("org.jetbrains.kotlin.plugin.compose")
}

group = "com.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
    google()
}

dependencies {
    implementation(compose.desktop.currentOs)
}

compose.desktop {
    application {
        mainClass = "MainKt"
    }
}

---

2. Writing the Main Code

Create a file src/main/kotlin/Main.kt and add the following code:

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.*

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "Compose for Desktop App") {
        App()
    }
}

@Composable
@Preview
fun App() {
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text("Hello, Compose for Desktop!", style = MaterialTheme.typography.h3)
        Button(onClick = { count++ }) {
            Text("Click me: $count")
        }
    }
}

---

3. Running the App

Run the following command in the terminal:

./gradlew run

Or simply run Main.kt from IntelliJ IDEA.
That’s it! You now have a basic Compose for Desktop application up and running. 🚀