Use Fleet for Multiplatform development — tutorial

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 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.

   

   Fleet detects the project type and opens it for you.

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

   

   At the top of the window, you'll see messages from Fleet as the project is imported and indexed.

When Smart Mode is enabled, Fleet offers language-related features such as code completion, navigation, debugging, and refactoring. When Smart Mode is disabled, Fleet works as a simple code editor. You can quickly open files and make changes, but without most of the advanced language-related features.

Under the hood, Fleet chooses which backend to use to process code. When Smart Mode is enabled, the backend for Kotlin is the same code-processing engine used by IntelliJ IDEA, so the functionality you might be already familiar with is retained.

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

Run your project

When opening a project, 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.

Choose the iosApp configuration from the list and run it. The application will automatically be executed on the iPhone simulator.

In the build window, you'll see how the application has been compiled and launched:

Navigating code

Let's see how cross-language navigation works in Fleet using the example of navigating from Kotlin to Swift:

1. Open the composeApp/src/commonMain/kotlin/App.kt file. Here's the App composable, the center of the sample code.

2. Select the App() function and run the Usages action from the context menu or with the ⌘ U shortcut. You can see it is invoked in three files:

   

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

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

4. Instead of manually browsing to find the Swift file that implements this functionality, navigate to it directly by using the Usages action again:

   

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

Editing in multiple languages

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

1. Add a new function to the ComposeView type. Fleet will provide all 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)" } }

   The completion and code hints work in Fleet as expected. For example, if you forget the return keyword, or return a value of the wrong type, 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:

   @Composable 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(Res.drawable.compose_multiplatform), null) Text("Compose: $greeting") } } } } }

5. Rerun the application on iOS:

   

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

Refactoring across multiple languages

Navigation is not the only feature in Fleet which is cross-language. The same applies to refactoring.

You have already seen that the MainViewController() function is declared in Kotlin but invoked from Swift.

Select the MainViewController() function and use the Rename | Refactoring action to change its name to MainSwiftUIViewController:

The function name is changed in both Kotlin and Swift files.

Debugging

One more example of cross-language functionality is debugging. The Fleet debugger can automatically step between Swift and Kotlin code.

1. In the ContentView.swift file, set a breakpoint on the return expression of the sumArray() function on line 17.

2. In App.kt, set a breakpoint in the App composable on line 23.

3. Open the Run & Debug menu and click Debug next to the iosApp configuration.

4. When the breakpoint on line 17 of ContentView.swift is reached, in the Debug menu, use Step Out to move to line 7.

5. To move into the MainSwiftUIViewController() Kotlin function, use Step Into.

6. Click Resume to move on to the breakpoint on line 23 of App.kt.

   

   The debugger shows that there are no errors in the code.