Fast Prototypes with Flutter + Kotlin/Native

Tasked with making the app for our upcoming internal OLX Group conference and having a lot already on our plate, my team was thinking of how to reduce the time for us to make an app for both iOS and Android. The first thing that came to my mind was using Kotlin, as it has a way to compile on other platforms. Not everything went as planned, but (spoiler alert) we made it in time, and we learned a lot!

This is a story about how we made the OLX Group Product & Tech Conference app in record time.

There’s been a lot of effort by companies like Google and Facebook lately regarding cross platform development. Flutter and Kotlin/Native are frameworks that came out of some of those efforts.

What is Flutter?

Flutter, developed by Google, was announced in back in 2017. It uses Dart as the programming language. Flutter supports compiling to both Android and iOS using one code base written in Dart. Flutter compiles natively instead of using Web Views inside the apps. However it does use its own UI components as opposed to using the native platform specific ones, e.g. UIView in iOS, Fragments and ViewGroups in Android. Flutter also natively supports Material Design and Material Theming in its UI components.

We had no experience in Dart, we didn’t feel we had time to learn a new language (we have other priorities as well). We really didn’t start looking into using Flutter until we realized we don’t have much time left. Going back to the story, we started with using Kotlin/Native, and developed some mock data and logic with it to start:

Kotlin/Native folder structure. Notice that there is a common folder, to put all common code, written in kotlin. Android and iOS projects use the code from the common folder.

What is Kotlin/Native?

Kotlin/Native is developed by JetBrains, the same company that created Kotlin. If you haven’t heard of Kotlin, you might not be using the internet lately. It’s basically a simpler replacement for Java, and as a plus, works seamlessly with Java. Kotlin/Native allows having common code written in Kotlin and cross-compiles to support other platforms that don’t support Kotlin natively, like iOS.

The Design

We asked our designer for some quick designs for the conference app, and she quickly used Material theming to generate a nice looking design. There is a plugin for Sketch to generate material-theming-compatible designs, that saved us a lot of time and effort.

Material Theming allows creating designs fast and supports both iOS and Android

Initially we looked for ways to implement the UI separately for Android and iOS. There is Material Theming support for both platforms but, we were still going to have to write UIs. We thought that if we can use Flutter for the UI, we only had to have one UI code base and we could continue to use the Kotlin logic that we already started with.

Making it Kotlin/Native and Flutter work together

Since Flutter was new to us, we needed to be sure if it would work with the existing code that we have. It seemed that no one had tried using both Flutter and Kotlin/Native. We planned to have an architecture represented by the image below. This architecture reduced the amount of platform specific code that needs to be written, and also reduces the amount of Dart code since we can isolate most of the logic in the common Kotlin code.

Overview of the App Architecture for both Android and iOS.

We could reduce a lot of the platform specific code using Kotlin/Native and Flutter’s Dart. Although it might be possible to write most of the common code in Dart, we are more familiar with Kotlin, so we used more of that.

Limitations

Both of these frameworks have certain limitations that made using them not as easy as it can be.

Limitation 1: Kotlin/Native only supports pure Kotlin classes for the common code. For example you would want to parse an integer into a java.util.Date class or use that class itself, you would not be able to use it, as the java.util.Date class requires JVM. One way to deal with this is to implement the methods in the platform code (Android and iOS), and `expect` that method from Kotlin/Native.

Limitation 2: Kotlin also uses Companion objects for static methods, that are translated into a totally new object for iOS. One way to get around this is making the static methods available as instance methods or to make the class method a global function.

Limitation 3: Kotlin/Native only supports compiling to arm64 code on iOS. The latest devices have this CPU architecture but older devices will still have armv7. It does compile to x86 and x86_64 though, so you can also run it on the simulator. To set the architecture support, just go to Build Settings and remove the other architectures aside from arm64 on valid architectures.

There are also limitations on the communication between the common Kotlin code, Flutter code and platform specific code. Flutter can communicate with platform specific code using channels, passing around a method name and a set of parameters. The parameters are limited to native classes such as map, list, string, int and similar. Things get a little bit messy when passing these objects around, so to handle this, serialization to a custom object is used. However both Flutter and Kotlin/Native have limited support for serialization, so for now, when serialization is not natively supported, we use the native classes directly.

Summary

The key takeaways from our experience are:

Flutter is awesome for fast prototypes
Flutter and Kotlin/Native are still in beta but is usable already though with some limitations
Kotlin/Native works well to reduce the amount of platform specific code
Some glue code needs to be written to pass around/serialize objects

We made our app with only around a week of planning and a week and a half of developing. We spent around an hour a day or so with four devs and a designer while still juggling our normal work.

We had a lot of fun building an app with Flutter & Kotlin, and hope that you’ll also give these two technologies a try.