KC Blog

Compose Multiplatform in Action: Continuing the Battle, Creating a CMP Project with Wizard

3 min read
CrossPlatform#CMP#Kotlin

Introduction

Compose Multiplatform (CMP)

Yesterday we just finished setting up the CMP environment

From a programming perspective

you could actually start from scratch

creating every file or structure yourself

creating each file manually

even using commands to write them

for example

touch xxx.kt

then edit each file with vim

But that's too cumbersome

so when creating projects

we typically use pre-configured project structures

For CMP

we can use the official Wizard tool

So today we'll learn

how to create CMP projects using the Wizard

and address some common issues

Table of Contents

  1. Compose Multiplatform Combat: Relax, Exploring CMP
  2. Compose Multiplatform Combat: First Battle, Installing CMP Environment
  3. Compose Multiplatform Combat: Continue Fighting, Creating CMP Project with Wizard
  4. Compose Multiplatform Combat: Running CMP Project on Android and iOS Simulators
  5. Compose Multiplatform Combat: Understanding CMP Project Structure and Build Configuration
  6. Compose Multiplatform Combat: Entry Points for Cross-platform Android and iOS Code in CMP
  7. Compose Multiplatform Combat: Using Material Design3 Theme in CMP Compose
  8. Compose Multiplatform Combat: Implementing Cross-platform UI with CMP Compose
  9. Compose Multiplatform Combat: Using expect and actual for Cross-platform Code
  10. Compose Multiplatform Combat: Implementing Compose Navigation Page Switching in CMP
  11. Compose Multiplatform Combat: Managing UI State with StateFlow in CMP
  12. Compose Multiplatform Combat: Implementing NavigationBar Bottom Bar in CMP
  13. Compose Multiplatform Combat: Using Koin for Dependency Injection in CMP
  14. Compose Multiplatform Combat: Implementing Cross-platform Database with SqlDelight in CMP
  15. Compose Multiplatform Combat: Using ROOM for Cross-platform Database Development & Troubleshooting

Creating a CMP Project

Project Creation
It's actually quite simple

using JetBrains' official webpage

Kotlin Multiplatform Wizard

Once on this page

you'll see a screen like this

Cover

Modify the project name, package name, etc. according to your needs

Let's quickly go through the settings as shown above

Project Name: This is the name of your project

It mainly affects the name of your built app

and your project's root folder name

Project ID: This is the Package Name of your built app

It also affects the package path in your project

Below you'll see several checkboxes

Android, iOS, Desktop, Web, Server

You can select which platforms you want the wizard to configure for your project

This is straightforward

For example, if my goal is to target Android and iOS, I'd select these two platforms

Under iOS, you'll see two options

allowing you to choose your UI configuration

Share UI (with Compose Multiplatform UI framework) Do not share UI (use only SwiftUI)

If you want iOS to use Compose, select

Share UI (with Compose Multiplatform UI framework)

Otherwise, use native SwiftUI

Note that these are just default settings based on your choices

you can still manually change them later

After completing the form, click Download

to get a pre-configured project

<img src="/images/compose/028.png" alt="Cover" style="width: 70%" / class="prose-img">

Importing into IDE

Unzip the compressed file from the previous step

then you can use Android Studio's import project feature

to import it into the IDE

so you can edit it there

Navigate to File > New > Import Project

Cover

In the file selection dialog that appears

select the folder you just unzipped

Cover

Bonus: Compose Multiplatform Wizard
As mentioned in previous days, the CMP community is quite active

and the main company behind it, JetBrains

continues to maintain and update the tools

This is a newer feature also developed by JetBrains employees

Compose Multiplatform Wizard though it's not included in the official documentation

I came across it while browsing GitHub

It's similar to the Kotlin Multiplatform Wizard mentioned above

Compose Multiplatform Wizard also generates projects with Compose as the UI through a web interface

but adds options to import commonly used CMP libraries

Cover

Just like before

enter your desired Project Name and Project ID

select the libraries you want

download, unzip, and import into your IDE

This is the GitHub repo of the developer terrakok if you're interested

It appears to be hosted on GitHub Pages

Compose-Multiplatform-Wizard GitHub