Here i’ll brief about, creating our very first Desktop App by using Kotlin + Jetpack Compose.
The Jetpack Compose Desktop App’s supports on below mentioned Operating System:
- Windows
- macOS
- Linux/x64
Note: The Jetpack Compose for Desktop is still in alpha stage.
At first, we need to download and install Intellij Idea IDE based on your system’s OS.
Then, after installing, start your IDE and you see window as shown below:
Step 1: Select Kotlin from the left panel as the main programming language for our application.
Step 2: Put you preferred name for your project in the Name input field.
Step 3: Select your project location where all your projects will get stored into the Location box.
Step 4: Select Desktop uses Kotlin <version> from the Project Template’s drop down menu.
Step 5: Let the Build System be by default Gradle Kotlin. If its not, then change it to Gradle Kotlin.
Step 6: Select your Java’s JDK version from the Project JDK drop down menu.
Note: If your system does not have JDK installed, then the Project JDK’s drop down menu will show <No SDK> as below:
Then just click on the Download JDK option from the drop down menu to make it available on your system. After that you get will the jdk with respect to its version as shown above. Just select it and proceed further with the mentioned steps.
Step 7: In Artifact Coordinates, we can set our preferred Group ID, Artifact ID and Version.
Step 8: In Project Structure, which is on the top right corner of the window, let the Project be in compose Module.
After filling up all the required fields mentioned in the window, just click on the Next button to proceed further. Then the next window will appear with some fields as shown below:
Note: The Name input field will remain disabled as the project’s name was already been taken by the software in the previous window. But, if someone wishes to change the name, then he/she can turn back by clicking previous button.
Step 1: In the Template’s drop down menu, Compose Desktop Application will be selected as default. But, if you want to change it then there are many options from which you can select as shown below:
Step 2: In Text Framework drop down menu, None will be selected as default. But, if you want to change it then there are many options from which you can select as shown below:
Step 3: In Target JVM version, select whichever version you preferred for your project from the options given in the drop down menu as shown below:
Note: You can also add multiple modules into your project just clicking the +(plus sign) located in the top left corner of the window.
Just click on the Finish button to successfully create your project. Then you will see, that the project starts to import Gradle based on the project as shown below:
After completion of importing all the required files, just open the Project’s pane from the top left corner and collapse the package name as shown below below:
Note: The main code file is located in the my_first_desktop_app(project-name)->src->main->kotlin->main.kt.
Get to know the code
- main — it is the main entry point for all the code to execute
- Window — it is used to create/open a window by holding the given content
- remember — it remembers the value produced by calculation. calculation will only be evaluated during the composition. Re-composition will always return the value produced by composition.
- mutableStateOf() — it returns a new MutableState initialized with the passed in value. The MutableState class is a single value holder whose reads and writes are observed by Compose. Additionally, writes to it are transacted as part of the Snapshot system.
- MaterialTheme — it is used to define styling principles from the Material design’s specification.
- Button() — it is a view component which is also known as a Contained Button
- Text() — it is used to display text and thus provides accessibility to the information
Complete Code
import androidx.compose.desktop.Window
import androidx.compose.material.Text
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
fun main() = Window {
var text by remember { mutableStateOf("Hello, World!") }
MaterialTheme {
Button(onClick = {
text = "Hello, Desktop!"
}) {
Text(text)
}
}
}Note: Update the compose plugin, as they are meant to change as per time. Go to the build.gradle.kts file and update both kotlin and compose versions. The versions used in this project is shown below:
plugins {
kotlin("jvm") version "1.4.20"
id("org.jetbrains.compose") version "0.2.0-build132"
}Then, to run the project just click on the Gradle option located in the top right corner to open up the pane. Then click to collapse the my_first_desktop_app(project-name)->Tasks->compose desktop->run
Then double click on the run to start the execution as shown below:
Also the edit/run debug configuration dialog will change from Add Configuration to my_first_desktop_app [run] as shown below:
The output will look as shown below:
On click of the Hello, World! button it will change to Hello, Desktop! as shown below:
If there is any issue, do let me know in the comment section. And for further posts on Jetpack Compose’s Desktop, Multi platform or other Jetpack Compose related things follow me here.
Connect with me on:
Thank you & Happy coding!
