✧ Kotlin Compose Multi-platform login screen — Android, iOS & Desktop App

Dheeraj Singh Bhadoria
3 min readFeb 21, 2023

--

Now we can use the compose for common UI for all Android, iOS and Desktop using kotlin

Compose Multi-platform login screen for Android, iOS and Desktop App

Hello friends, today in this article we will learn about compose multi-platform, and how we can create Android, iOS and desktop applications using compose multi platform.

To use the Kotlin compose for multi-platform you have first install the “Kotlin Multiplatform Mobile” Plugin in Android Studio.

Kotlin Multi-platform Mobile Plugin

And for desktop application you also need to install the “Compose Multiplatform IDE Support”. It will provide the IDE support for developing Compose for Desktop application.

Compose Multiplatform IDE Support

After successfully installing of Kotlin Multiplatform Mobile and Compose Multiplatform IDE Support you can start to create new project using KMM using following steps —

File -> New -> New Project

New Project — 1
New Project — 2
New Project — 3

So, By following the instructions given above, your new project will be created. In which there are three main modules —

androidApp: — This module contain the code of android application.

iosApp: — This module contain the code for the ios application.

common: — This module will contain the code that will be shared between androidApp and iosApp modules.

These were the models that were created by default. If you want to create your own module like “Desktop” for desktop app you can create new module using —

File-> New-> New Module

desktop: — This module contain the code for desktop application.

Common Module -> commonMain —

This module contain the composable function named App()

This App() Function will be called form the different module of Desktop, ios and Android.

Composable function App called from —

From common -> iosMain —

Calling Composable Function App from iosMain Module

From common -> desktopMain —

Calling Composable Function App from desktopMain Module

From common -> androidMain —

Calling composable function App from androidApp Module

After creating the Application Function in common module of each platform Android, iOS and Desktop

Now we have to call the Application function from the each platform module.

How to call the Application Function from each module —

From Android —

From Desktop —

From iOS —

After running the application it will show like this

Complete code repository

--

--