Klutter - Getting Started in Intellij IDEA

The Klutter Framework makes it possible to write a Flutter plugin for both Android and iOS using Kotlin Multiplatform. Instead of writing platform specific code twice in 2 languages (Swift + Kotlin), it can be written once in Kotlin and used as a Flutter plugin. In this tutorial we will create a new Klutter plugin project using Intellij IDEA.

Before Getting Started

To build and run an iOS app locally an Apple device is required. This tutorial assumes you are working on macOS. Next you’ll need to have Intellij and Flutter installed. No shock there! This tutorial was made with Flutter 3.0.5.

Install Plugin

First install the Intellij plugin: In the Intellij toolbar click on Intellij IDEA, Preferences and go to Plugins. In the marketplace search for Klutter. Install it and restart Intellij. Check the plugin is enabled.

klutter plugin logo

Note: For running the example app in Intellij you will need to also install the Flutter plugin. Just repeat the steps above for Intellij Flutter plugin.

Create new project

Open the new project wizard: In the Intellij toolbar click on File, New, Project… Alternatively if you are in the Welcome to Intellij screen just click on New Project. On the left side of the pop-up menu there should be a project generator option for Klutter. Select it after which you should see the klutter wizard screen:

Welcome to Intellij

Enter a name and group for your plugin. This tutorial will assume the following:

  • name: intellij_idea_tutorial
  • group: com.example.idea

Whatever you choose, stick to the following naming conventions:

  • Name and group should start with an alphabetic character.
  • Name and group should be lowercase
  • Name can only contain one of:
    • alphabetic
    • numeric
    • ‘_’
  • Group should start with an alphabetic character.
  • Group can only contain one of:
    • alphabetic
    • numeric
    • ‘_’
    • ’.’
  • Group contains at least 2 parts (e.g. there is minimally 1 dot)

If the name or group is invalid you will get a warning: Invalid name and group message

Click on next, and you can enter a project name + location. This is the root folder where the project will be created. If you prefer to keep the name of the root folder and your plugin identical then just enter your plugin name for both fields.

Project name and location

Click create and wait for the project to be created. This will take a few minutes. The plugin will do the following:

  • Create a flutter plugin project.
  • Add klutter plugin to pubspec.yaml.
  • Execute klutter:producer init.
  • Execute klutter:consumer init.
  • Execute klutter:producer install=library.

See the documentation or follow the battery-app tutorial to learn more about these flutter tasks.

Build project

Great, with a few clicks we have generated a new klutter project! Let’s verify everything works. The project should be recognized and linked as a Gradle project automatically. If not, then in the project view, right-click on the settings.gradle.kts file and select Link Gradle Project.

Note: Sometimes the sync does not work properly the first time. If that’s the case, go to the Gradle task bar, right-click the project and select Reload Gradle project.

In a terminal run the command below. This will build the required artifacts for both Android and iOS. Grab a coffee, it might take a while…

flutter pub run klutter:producer install=platform

When done the terminal should display a message Task ‘consumer add intellij_idea_tutorial’ finished successful. Make sure there are no error messages. In the root/android/klutter folder there should now be a platform.aar file. For ios there should be a Platform.xcframework folder in root/ios/Klutter containing a framework for simulators and iphones.

Run app

The project is set up and the app is build. Let’s run the app to check everything works. Open a terminal in the root folder and run:

flutter pub get

This should execute pub get in both the root and root/example folder. If not then go to root/example and do flutter pub get again.

In a terminal go to root/example/ios and run:

pod update

When successful then the terminal should display a message similar to There are 2 … total pods installed.

Open an Android emulator and iOS simulator. In the Intellij project view go to root/example/lib and open the ‘main.dart’ file. Select your Android emulator in the top bar and start the example app from the main method.

Project name and location

Now select the iOS simulator and start the example app from the main method.

Project name and location

And that’s it. Congratulations on your first Klutter plugin made with Intellij!

Is anything missing?

If anything is missing or seems confusing on this page, please share your feedback.

Written on August 19, 2022