Getting started with Kotlin Multiplatform

Create a project

In this tutorial, you'll create a new project with the web wizard:

1. Open the Kotlin Multiplatform wizard.

2. On the New project tab, change the project name to SampleProject and use com.example.project as the project's ID.

3. Select the Android, iOS, and Desktop options as your platforms.

4. For iOS, make sure that the Share UI option is selected.

5. Click Download and unpack the resulting archive.

   

Enable Smart Mode

1. Launch JetBrains Fleet.

2. On the welcome screen, click Open File or Folder or select File | Open in the editor.

3. Navigate to the unpacked SampleProject folder and click Open.

   JetBrains Fleet detects the project type and opens it for you.

   

4. When opening a folder with a build file, JetBrains Fleet gives you the option to enable Smart Mode. Click Trust and Open.

   At the top of the window, JetBrains Fleet displays different messages as the project is imported and indexed.

   

When smart mode is enabled, JetBrains Fleet operates as an code editor, with all of the code completion, navigation, debugging, and refactoring features available. When it is disabled, JetBrains Fleet works as a simple file editor. You can quickly open files and make changes, but most of the productivity features will not be available.

When Smart Mode is enabled, JetBrains Fleet selects the backend for processing code. For Kotlin, it uses the same code-processing engine as IntelliJ IDEA. This means you can expect the same functionality you may already be familiar with.

To check the Smart Mode status, click the lightning bolt icon at the top:

Check out Compose Multiplatform Preview

JetBrains Fleet can build static previews for @Composable functions without parameters, annotated with @Preview. Projects generated by the Kotlin Multiplatform wizard have a function just like that, so you can quickly see this feature in action:

1. When the project is imported and Smart Mode is enabled, open the composeApp/src/commonMain/kotlin/App.kt file.

2. Once the file is fully loaded, you will see the preview icon in the gutter on the line where the App() function is declared. Click the icon to build the preview.

   

Current limitations for the previews:

• Previews are working for common code as well as for desktop source sets. Android native UI previews are not supported yet.

• JetBrains Fleet does not currently support inherent preview annotations: if you add @Preview to an annotation class, this class on its own will not enable previews for composable functions annotated with it.

Run your project on a specific device

1. When opening a project, JetBrains Fleet creates run configurations for the targets found in the build file. To access run configurations, you can:

   • Use the ⌘ R shortcut.

   • Select Run | Run & Debug in the main menu.

   • Click the icon at the top of the window.

2. From the Run destination drop-down list, select the necessary device. For more information about the device chooser, refer to Selecting a device to execute the configuration.

   

For example, if you select the iosApp configuration from the list and run it. The application will automatically be executed on the iPhone simulator.

The build window displays how the application was compiled and launched.

Code navigation

You can use cross-language navigation in JetBrains Fleet. For example, you can navigate from Kotlin to Swift:

1. Open the composeApp/src/commonMain/kotlin/App.kt file. Here you can notice the App composable in the center of the sample code.

2. Select the App() function and run the Usages action from the context menu or by pressing ⌘ U.

   

   This is where the App composable is used to launch the Android, iOS, and desktop targets.

3. Select the MainViewController.kt file. You will see the MainViewController type that is invoked from Swift code.

4. To find the Swift file that implements this functionality, navigate directly to it by using the Find Usages action again – press ⌘ U.

   

   Because there is only one usage, JetBrains Fleet automatically opens the file for you.

Editing in multiple languages

Since the ContentView.swift file is already open, you can explore JetBrains Fleet support for editing Swift code:

1. Add a new function to the ComposeView type. JetBrains Fleet will provide all of the expected coding assistance:

   struct ComposeView: UIViewControllerRepresentable { // ... func sumArray(input: [Int]) -> String { var total = 0 for item in input { total += item } return "Total value is \(total)" } func updateUIViewController(_ uiViewController: UIViewController, context: Context) {} }

   The completion and code hints work in JetBrains Fleet as expected. For example, if you forget the return keyword, or return a value of the wrong type, JetBrains Fleet will highlight the error.

2. Update makeUIViewController() to invoke the new function:

   func makeUIViewController(context: Context) -> UIViewController { MainViewControllerKt.MainViewController(text: sumArray(input: [10,20,30,40])) }

3. Get back to the Kotlin code. Update the MainViewController.kt file to accommodate this change:

   fun MainViewController(text: String) = ComposeUIViewController { App(text) }

4. Adjust the App composable as well:

   fun App(text: String? = null) { MaterialTheme { var showContent by remember { mutableStateOf(false) } val greeting = remember { Greeting().greet() } Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Button(onClick = { showContent = !showContent }) { Text(text ?: greeting) } AnimatedVisibility(showContent) { Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Image(painterResource("compose-multiplatform.xml"), null) Text("Compose: $greeting") } } } } }

5. Rerun the application on iOS.

   

   The simulator displays the message from the new function instead of the original greeting.