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.
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.
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:
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:
- Group should start with an alphabetic character.
- Group can only contain one of:
- 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:
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.
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.
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.
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:
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.
Now select the iOS simulator and start the example app from the main method.
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.