Flutter and Kotlin Multiplatform

Write application with one single code base that can run on two major platform iOS and Android is very convenient and cost-effective. When Facebook introduced React Native (RN) in 2015, it’s gain popularity some people believe RN is the future of Hybrid App Development. On the other hand, Google publishes another approach one or two years after RN release and named it Flutter. Like RN Flutter also can run on both platform thus reducing cost and time during development.

If you read my another post “Why Kotlin Multiplatform” I’m mention that hybrid framework just act as “duct tape” to native platform. RN create Bridge to interact with the device and convert JSX element code into Original Equipment Manufacturer Widget (OEM) in this case Cupertino for iOS or Material Design for Android.

Flutter have different approach for building cross-platform without using OEM widgets neither WebView that shipped with the device, Flutter render every UI component using it’s own high-performance rendering engine. The engine C/C++ code is compiled with LLVM on iOS or Android NDK.

Many resource says Flutter performance is so so much better that RN and support 60 fps animation as a standard because Flutter not requires bridge to interact with native components like RN.

So back to title of this article can Kotlin Multiplatform use in Flutter ?

The answers is yes you can but in the end you need to write more code in your flutter project to communicate with Kotlin library, You can read this article below for more detail.

Fast Prototypes with Flutter + Kotlin/Native

Unfortunately they not open source the code, so let’s we try to create Flutter project that use Kotlin Multiplatform library.

Like article we gonna create Flutter Movie Browser for build user interface and using library from Kotlin for get data. In this article we gonna make simple flutter without state management, architecture and unit test.

1. Build the Kotlin Library

I assume you already have Kotlin Multiplatform project, if not you can follow my article below.

Kotlin Multiplatform for iOS and Android Mobile Application

I make some changes on output of data model, to be able to use at Dart code we need to wrap the model into Map.

MovieViewModel.kt

You can check my commit here, or checkout the whole project and switch to dev/flutter_ready branch.

2. Copy library to flutter project

You can setup your own repository on maven local or on other artifact system, for now we do it manually by copy the library to Flutter project. Create new Flutter project and copy Kotlin library to iOS and Android folder at your Flutter project

3. Setup the library

Add the library and dependencies to app build.gradle at your Android project, you also need import ktor library and coroutines library. On iOS you need Link the frameworks to your iOS project at Xcode.

4. Call library in Android

To be able to call Kotlin library we need to use Flutter platform channels, for basic implementation you can check here. In Android MainActivity you need to get parameter that send from Flutter side using this code

val searchQuery = call.argument<String>("query")
presenter.getMovieList(searchQuery!!)

and after get result from library you need to parse the model object into Maps to be able to process in Dart.

override fun getMovieSuccsess(searchViewModel: SearchViewModel) {
  val res = searchViewModel.parseForFlutter()
  channelRes!!.success(res)
}

5. Call library in iOS

In iOS same like in Android to get parameter from Flutter by using this code

let args: [String:String] = call.arguments as! [String : String]
let searchQuery:String = args["query"] ?? ""

and send the result to Flutter by this code

func getMovieSuccsess(searchViewModel: SearchViewModel) {
  channelRes(searchViewModel.parseForFlutter())
}

6. Create Model in Flutter Dart

Until now Flutter can’t receive Object from native side, to be able to use object we need to create Dart data object and convert input from Kotlin library(Map) into Dart object

7. Call library from Flutter

Flutter call native library using MethodChannel, string constant on native code must be same with constant that describe at Flutter.

Final Thoughts

If you want to build application for iOS and Android only then Flutter will be great solution for you, they have clear and well structured documentation, performance also better then another framework, the community still small if you compare to RN but it growing. If you coming from Java/Kotlin or Swift background you will not having problem when try Dart. It’s just take me one or two day to get comfortable working with Dart.

So how about Kotlin Multiplatform ?

If you want to build apps just for iOS and Android it’s better go with Flutter but if your target also for web maybe you still consider Kotlin Multiplatform

With Flutter/Dart you still can build one code base that share business logic but on web side you need use AngularDart or Hummingbird to get Dart code working, check this link for implementation.

On the other hand with Kotlin Multiplatform you can sharing code between iOS, Android, JsBrowser, NodeJS, Windows Platform (mingwX64), Linux, WebAssembly, or MacOS.

Conclusion

If you have a big team of developers, a lot of time and want to build code that can be share on many platform maybe Kotlin Multiplatform still your best solution.

If you just want to make application with one code base and running on iOS, Android and web it’s better you go with Flutter.

Source Code :

aldychris/FlutterMovieBrowser

Last but not least click the 👏 to support me or hold the clap button, to leave more claps.