Compose for Desktop

Rasul Aghakishiyev
ProAndroidDev
Published in
4 min readFeb 12, 2021

--

Declarative way programming becomes so popular nowadays. There are a lot of frameworks such as Flutter, SwiftUI, JetPack Compose which use this way of programming. Until recently Flutter and SwiftUI were the only frameworks that allow you to develop cross-platform applications using the same codebase. But today, meet new framework Compose for Desktop.

Compose for Desktop is a UI framework port for developing applications for macOS, Linux, Windows. It uses the core Compose repository developed by Google. It is currently in the alpha version, but despite that, we will try to create a simple app using it.

Usage

For developing applications using Compose for Desktop, you need to install the latest version of Intellij Idea (The community version also supports it). The main requirement is JDK 11

To create a new project:

File -> New Project ->Kotlin -> Desktop uses Kotlin 1.4.20

Then select the template: Compose Desktop Application and click Finish.

Our project structure will looks like this:

You can see there’s only one file in the src folder called main.kt. Let’s open it and see what is inside of it

fun main() = Window {
var text by remember { mutableStateOf("Hello, World!") }

MaterialTheme {
Button(onClick = {
text = "Hello, Desktop!"
}) {
Text(text)
}
}
}

There is just one function called main. As you know the main function is the starting point of any Java applications

Let’s look closely at this function. It returns the Window composable.

Window — function which opens a window with the given content.

If we go to the source code we can see that this function has a lot of other parameters that can be used

title: String = "JetpackDesktopWindow",
size: IntSize = IntSize(800, 600),
location: IntOffset = IntOffset.Zero,
centered: Boolean = true,
icon: BufferedImage? = null,
menuBar: MenuBar? = null,
undecorated: Boolean = false,
events: WindowEvents = WindowEvents(),
onDismissRequest: (() -> Unit)? = null,
content: @Composable () -> Unit = emptyContent()

But for now, we will not change these parameters.

MaterialTheme — Styles your application from the Material design specification. If you are an Android Developer you would be familiar with this.

There are also other things like remember, mutableStateOf. Don’t think about them for now, we will cover them in our next lesson.

Now if we run our application we will see this output

Let’s change our UI a little bit. For example center horizontally our button. For doing this we will use Column composable.

After some changes our code looks like this:

Column(horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = {
text = "Hello, Desktop!"
}) {
Text(text)
}
}

So let’s run our application to see the result:

Oh, nothing changed :( But wait let me explain something.

Column composable by default wraps the content and gets the same size as its content. So to make our button horizontally centered, we should resize our Column width to make it fill our application windows width. For this purpose, there is a Modifier parameter that has fillMaxWidth function.

And now our code will be like this:

MaterialTheme {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxWidth()) {
Button(onClick = {
text = "Hello, Desktop!"
}) {
Text(text)
}
}
}

And if run our application again, we will see that everything work as we wanted:

Looks cool right?

Conclusion

Compose for Desktop is a very new but perspective framework, that will helps developers to create applications quickly with minimum code changes using the same codebase. And this will allow you to have the same UI and behavior across the platforms.

Feel free to follow me on Twitter, also don’t hesitate to ask questions related to this.

Thanks for reading, and see you later!

--

--

Android Software Engineer. Interested in mobile development. In love with Jetpack Compose