Compose Multiplatform : Building an app for Android, iOS and Desktop
Introduction
The objective of this article is to present the Compose Multiplatform Framework and demonstrate the use of MVVM architecture with Ktor for networking.
What is Compose Multiplatform?
According to JetBrains’ website, Compose Multiplatform is a declarative framework for sharing UIs across multiple platforms, based on Kotlin and Jetpack Compose. Currently, Compose is stable on Android and Desktop, while iOS is still in alpha. However, numerous functionalities can be developed on it. As of January 2024, the Web version is experimental.
Creating a Compose Multiplatform Project
⚠️ Before proceeding with the following steps, ensure that you install kdoctor and run it. This ensures that everything is installed properly. If any component is missing, the terminal command will display it. If everything is in order, it will show up as follows:
For this project, we will utilize JetBrains’ Kotlin Multiplatform Wizard, a web page to set up our project and download the source code template.
On this wizard, there are various configurations. For now, let’s select the following settings:
In this section, we will define the project name and ID. We’ll name this project “got-characters”, a simple app to display Game of Thrones characters from a REST API. You can adjust the Project ID according to your preference.
In the following section, we'll choose these options. Note that iOS offers two options; we'll select the Share UI to utilize Jetpack Compose for building UI on iOS. We can still use SwiftUI Code, depending on your preference.
In the final section, we’ll select the Desktop option to generate a desktop template for our app.
Now, all we need to do is download the project and extract it.
To open this project, I’m going to use JetBrains’ Fleet IDE. You can also use Android Studio for that.
The first file that we’ll open is the libs.versions.toml inside the gradle folder. This file is the version catalog, which lists dependencies represented as dependency coordinates that a user can choose from when declaring dependencies in a build script.
Now, we will need to add some dependencies to ensure our app works properly.
Next, we will head over to the build.gradle file inside the composeApp folder and add the following code.
After this, sync your project, and we are good to go.
Using MVVM in Compose Multiplatform
In this example, we are going to use the MokoMVVM library, although there are others that serve the same purpose. We chose this one because it’s easier to understand and write.
In the composeApp/src/commonMain directory, our composable and Kotlin code reside. The App.kt file serves as our entry point.
The first thing we’ll do is create our HttpClient Object.
Let’s define our data class for each character that returns from the API.
Next, let’s create a Util file to handle returns from the API and Screen State.
Now, let’s create our ViewModel class. In the commonMain/kotlin directory, we are going to create HomeViewModel.kt using the MokoMVVM class. Here is an example:
Now that we have everything ready in our ViewModel class, let’s build a UI to handle the response.
Building the UI
If you already have experience with Jetpack Compose, it won’t be hard to build this part. Here is the HomeScreen file:
The last step is to call our HomeScreen composable in our App.kt file:
That’s it! We should now have a Compose Multiplatform App running on multiple devices. Here’s the result:
You can find the source code of the project here.
