Implementing Kotlin native code on your Flutter application
Hey everyone!
Today I’m going to show you how you can connect your project made in Flutter with Android native code that uses Kotlin as its main language.
For those who still don’t know, it is possible to use native codes coming from the Android operating system (using Java or Kotlin languages) or iOS (using Swift or Objective-C languages) and connect with your Flutter project.
For this, we will use a functionality provided by the Flutter documentation called Method Channel, which is nothing more than an API for specific platforms that provide us the means to connect with the native code using Flutter’s Dart language. In this article, I will only focus on the use of this method on Android and with Kotlin language; however, in the future I intend to teach you how to make this connection with Java code as well as with Swift code for iOS.
I suggest you read the documentation on the official Flutter website at the link referenced below, so you can stay on top of more information about this functionality: https://flutter.dev/docs/development/platform-integration/platform-channels?tab=android-channel-java-tab.
Before we start coding…
You will need to have the following programs installed on your machine:
- Android Studio
- Visual Studio Code
- Flutter SDK
We are going to use Android Studio to edit our native code made in Kotlin that will be inside the Android folder of the Flutter project. I recommend you do not do this procedure in Visual Studio Code; using Android Studio is better to install the packages and configure the application gradle more appropriately.
For those who have 4GB or even 8GB of RAM in their machine, I recommend that you open one program at a time, as it is very heavy to work with Visual Studio Code and Android Studio at the same time. Let’s start with Kotlin!
1. Kotlin’s Main Activity
After you have created your Flutter project (or already have an existing one), we will access the android folder and then navigate between the folders:
app/src/main/kotlin/
After that, follow the folders that will be in accordance with the name of your project, in my case it is com.example.flutter_kotlin, then it would be like this:
app/src/main/kotlin/com/example/flutter_kotlin/
Let’s open the MainActivity.kt file found in that folder. Opening this file in Android Studio, we will implement the following code (you can delete everything in that class and replace it):
Here’s some explanations for this class:
This is the main Kotlin class that is created when you build your Flutter project. Note that this class extends from FlutterActivity(), which allows integration between Flutter and Kotlin.
It is very important to initialize this CHANNEL attribute because it is mandatory that you define the type of channel you will be using. You can use any name you want but remember the name you will be using because we will use it later.
This is a function that is mandatory when using the FlutterActivity extension. We have to implement the setMethodCallHandler function to wait for a call coming from Flutter. Then you just need to set the call and result parameters, with call being the parameter that comes directly from Flutter and result the parameter that will arrive at Flutter.
And after “when”, we are just making a call that means: when the call from Flutter is “changeColor”, do this following function. This function is changeColor(), which receives the call and result parameters. After that, we just need to create this following function:
This function basically receives the color as a String (HEX color) from Flutter and returns this value as a result. It is important to use var instead of val. If you are not familiar with Kotlin, you have to use var if you want to change some values, because val declares an immutable value, and it cannot be changed. And finally, the class would be like this:
2. Let’s use Flutter
Now that your Kotlin code is done, we will now work with the Flutter project. I organized my folders in the following way; you can organize it whichever way you prefer.
Our call between Kotlin and Flutter will be in the repository folder, you could use the names core or data as well. And the main HomePage will be in the pages folder.
Repository
I have created a dart file named platform_repository.dart, and from there we will make our connection to the Platform Channel. I will explain the code as follows:
This is our connection between Flutter and Kotlin. You need to create a Class and use the MethodChannel in order to make the call. Here are some notes about this class:
Remember when you initialize the CHANNEL value in the Kotlin code? That’s where you are going to connect your Dart code with Kotlin. Please pay close attention to the name you use because if it is different it will not work.
This whole function is simple, we will only receive a String color as a parameter and try to connect with the platform method. Once everything goes well, the Kotlin code will return the result to us with the result.success method. If something goes wrong, it will drop in the PlatformException and throw an error.
Remember when we use call.method.equals(“changeColor”) in our Kotlin code? This is where you call this method using the invokeMethod() method. Since we are passing the color as a parameter, we need to use both method and arguments, with method being changeColor and argument the color we are going to pass. In other cases, the arguments can be optional and you don’t necessarily need to pass an argument, but it depends on what you are working with.
Home Page
This is our home page. I am not going to explain the view this time because it would be very tiring, so I am going to show you my Home Page and then explain how I’m making the call with the Repository:
In these two lines I’m initializing my PlatformRepository class and a color value as String. This color is a Fuchsia color as default, but it will change later.
This function is going to call our changeColor method and pass the String color as a parameter, then we just return this result to our page.
Those two functions are passing the color as a parameter. You can use any colors you want. I just used the blue color for Flutter and the orange color for Kotlin, so we won’t be lost. Please note that we are using setState to change the state of our page, otherwise the change will not work and you would have to reload the page.
Just pay attention to this line of code, in which we are passing our color coming from Kotlin as a result. We need to parse the String to a int value because the Color() widget receives the color value as an integer.
And finally, this is the result :D
In case you already have a project using native code (either for Android or iOS) it is also possible to do the opposite, which is to connect your native code to Flutter, thus bringing the views or functions of the code made in Dart to your application. This type of migration has already been implemented by some companies. A good example is the Brazilian company Nubank, who chose to migrate their native application to Flutter and did not need to redo all of their code from scratch.
So that’s it. I am going to share my repository so you can get the images and test the app if you want it. If you have any questions, just leave a comment below and I will be happy to help! :).
