Klutter - Getting Started in Android Studio

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

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 Android Studio and Flutter installed. For Android Studio you will need Electric Eel or newer which at the time of this writing is a preview build. This tutorial was made with Flutter 3.0.5.

Install Plugin

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

klutter plugin logo

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

Create new project

Open the new project wizard: In the Android Studio toolbar click on File, New, New Klutter Project… Now you should see the klutter wizard screen:

New Klutter Project screen

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

  • name: android_studio_tutorial
  • group: com.example.studio

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 android_studio_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 Android Studio 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 Android Studio!

Is anything missing?

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

Written on August 19, 2022