Compose Multiplatform : Windows & Mac Desktop Applications(KMP)
In my previous blog, we covered how we create common UIs and share business logic for Mobile Applications -
Compose Multiplatform : Android and iOS app code at one place
Compose Multiplatform is used to create common UIs for multiple platforms. It builds upon Kotlin Multiplatform which is used to share Business Logic of multiple platforms at common place.
Desktop Apps with Compose Multiplatform
This new technology is not only bound with Mobile Development only. We can also create Desktop Applications through Compose multiplatform.
Let’s explore together Compose Multiplatform for Desktop Applications. In this tutorial, we will cover apps for Mac and Windows platforms.
Install the following tools
- JDK 11 or later
- IntelliJ IDEA Community Edition or IntelliJ IDEA Ultimate 2020.3 or later (other editors may also work, but we’ll use IntelliJ IDEA in this tutorial)
- The Compose Multiplatform IDE support plugin
The Compose Multiplatform IDE support Plugin
Before starting the project, install the following plugin in your IntelliJ IDEA.
Settings -> Plugins -> Compose Multiplatform IDE support
Create First Desktop App through Compose Multiplatform
Project Setup
As we have previously installed the plugin, we will see the Compose Multiplatform option while creating the new project in IntelliJ IDEA. We need to select this option.
Project Structure and code
This Main.kt class has default template code. When you run this project, you will see the following screen.
Let’s update App() composable method code.
Create 1 minute Timer Watch with Compose Multiplatform for Desktop
Through Canvas, we will create a circle to represent our clock and a straight line which will refer seconds needle.
As we know, in 60 seconds, the second hand of clock will rotate full 360 degrees. Therefore, 6 degrees per second is the result.
As a result, after one second, we need to rotate our straight line 6 degrees from the center.
@Composable
@Preview
fun App() {
MaterialTheme {
Clock(modifier = Modifier
.aspectRatio(1.0f)
.padding(100.dp))
}
}
@Composable
fun Clock(modifier : Modifier) {
val isStart = remember { mutableStateOf(false) }
val progress = remember { mutableStateOf(0f) }
LaunchedEffect(isStart.value) {
while (isStart.value) {
if (progress.value == 360f) {
progress.value = 0f
isStart.value = false
}
progress.value += 6f
delay(1000)
}
}
Button(onClick = {
isStart.value = !isStart.value
}, content = {
if (isStart.value) {
Text("pause")
} else {
Text("Start")
}
})
Canvas(modifier = modifier) {
val canvasWidth = size.width
val canvasHeight = size.height
drawCircle(
color = Color.Black,
center = Offset(x = canvasWidth / 2, y = canvasHeight / 2),
radius = size.minDimension/2,
style = Stroke(5F)
)
withTransform(
{
rotate( progress.value)
}, {
drawLine(
strokeWidth = 4.dp.toPx(),
cap = StrokeCap.Round,
color = Color.Blue,
start = center,
end = Offset(size.minDimension / 2, 12.dp.toPx()))
}
)
}
}
After completing the aforementioned steps, let’s go on to running our application.
Run the Application
Run same project on both platforms Windows & Mac.
Windows
Mac
Conclusion
Compose Multiplatform allows us to create code once and have it run on both Desktop platforms. Please see my earlier article for information on the same Android & iOS App Development as Compose Multiplatform allows us to create mobile applications.
We discussed the setup process and the tools that are required. We also created our first sample application. You can also create your own applications by adhering to all these straightforward steps.
I hope you enjoyed this tutorial. If you have any questions or feedback, please feel free to share in the comments.
Happy Learning 🙂
Visit my other Android blogs as well : Blogs