Jetpack Compose

How to Make a Jetpack Compose Desktop App

A hands-on tutorial

Photo by Clay Banks on Unsplash

In this tutorial, you will learn the minimum to create a desktop HelloWorld app with Jetpack Compose for Desktop in Kotlin.

• Level: For beginners in compose for desktop
• Requirements: Java installed
• Final sample: github.
• Final UI:

1. Setup the project

First, in order to set up the project, you will need a Gradle project skeleton with a root build.gradle, settings.gradle and app/build.gradle.
Let’s do that using kts files to use only one language: Kotlin ❤️

build.gradle.kts
Create the build.gradle.kts at the root of the project with the following to define the gradle project with compose maven.

settings.gradle.kts
Add at the root of the project the settings.gradle.kts to define the name of the project and the gradle module app.

rootProject.buildFileName = "build.gradle.kts"
rootProject.name = "medium-proto"
include(":app")

app/build.gradle.kts
Add to app/build.gradle.kts the plugin for compose:

plugins {
    kotlin("jvm")
    // https://github.com/JetBrains/compose-jb/releases
    id("org.jetbrains.compose") version "1.2.0-alpha01-dev686"
}

Then add the dependency:

dependencies {
    implementation(compose.desktop.currentOs)
}

Finally, define the application entry point:

compose.desktop.application.mainClass = "com.medium.MainKt"

Final touches

Then, in order to compile the app, add to the root of the project a gradlew file and gradle folder. Here’s how to get the file. On MacOS, you can do it with this command on your root project: brew install gradle && gradle wrapper.

2. Create the main view

Create a kotlin file app/src/main/kotlin/com/medium/Main.kt with

This file contains the application definition with a Window containing

• onCloseRequest: The behaviour to close the app when the window close button is clicked
• state: The size of the window in dp, the metric measure.
• title: the title on the top bar of the window.

Inside the lambda of the Window method, you can write JetPack Compose code “like” on an Android app. Here a Box in max-width and max-height has been added in order to center the text into the window. The Box is a container that allows the Text to have a Center alignement.

3. Build and launch the app

Get the permission to run the script via the command chmod 755 ./gradlew
Then, run ./gradlew run and tada:

Thank you to the JetBrains team and JetPack Compose and JetPack Compose Desktop contributors.

To go further

• How to create a MacOS install file pkg to avoid using jar: use jpackage
• How to add an app icon: cf samples in this project
• How to release as a native app to avoid jvm: cf this same repository