KMP vs Flutter. Part 1: Setting everything up.
Introduction
This is a follow-up article to the post I made on this topic.
KMP is gaining traction — there is no doubt about that. Flutter, on the other hand, is still the most popular cross-platform framework out there. And from what I saw when looking through cross-platform jobs — Flutter is nowhere close to giving up its leading position.
However, everyone is talking about the new guy on the block — KMP. So, I was torn between which one I should dive into.
And then it hit me — why not do a comparison for both? What if I build a movie application both in Flutter and KMP and compare them each step of the way? So here we go.
This will be a series of articles where I build a full-fledged movie application in Flutter and KMP. I will describe my impressions, thoughts and best practices that I discover in the process.
I’m planning to cover the following topics in these articles:
- Networking I/O
- Architecture (best practice for each framework)
- Debugging
- State management
- ListViews
- Video playback
- Animations
- Integration with Firebase
- Tests
- Permission handling
- Notifications
Here’s a bit of context about me: I’m an Android developer with around ten years of experience in the Android platform. I’ve worked with Flutter for about a year in one of my jobs. I also played around with a small project of mine. So you could say I’m familiar with it, but I’m definitely not an expert.
As for KMP — I have zero experience, but my Android experience should be a big helping factor.
This first article will focus on installing the necessary tools and setup in each framework.
Let’s start.
KMP
Project setup
KMP provides you with different options for setup. You can choose to share the logic and the UI or just the logic. I’ve made this picture to explain the difference between the two:
To put it simply:
- Use KMP (Kotlin Multiplatform) when you want only to share logic.
- Use Compose Multilplatform — when you want to share logic + UI.
Since I’m a Compose fan — I opted for the second option, sharing both the logic and the UI.
Here’s a link to help you set up CMP.
Setting up the environment
To use KMP, you will need the following tools installed:
- Android Studio
- Xcode → You have to check the compatibility guide here
- JDK
- Kotlin plugin → Make sure you have the latest compatible version
If you’re working on a Mac, you can also install the KDoctor to verify that everything is correct.
When installing KDoctor via homebrew — there might be some permission problems — so you might want to check out this solution on Stackoverflow.
When running kdoctor, you’ll get something like this:
Now, the exciting part:
Creating the project
The instructions for creating a CMP project are here.
Creating the project using a wizard is a bit awkward in KMP because it involves:
- Downloading the package with setup files
- Manually unpacking the archive in a desired location
- Importing the project into Android Studio
Running the Android configuration
The Android configuration works right out of the box. I didn’t have any problems with it. The only problem I had was related to Android Studio. For some reason, my emulator wouldn’t start up along with the configuration.
I had this progress bar running infinitely:
If you have a problem launching an emulator when running the configuration — start it manually yourself and then launch the configuration because I was stuck for a while with the problem above.
Running the iOS configuration
Android Studio provides the ability to set up iOS configuration, but I wasn’t able to. Frankly, it’s unnecessary. Opening up the iOSApp package in xCode works much better. Just navigate to the project directory and open the iOSApp folder.
If you have installed all of the necessary things that xCode asks you to including the simulator — you should be ready to go.
I had problems launching the emulator and building the application straight away. But they were quickly resolved by clicking Product → Clean build folder.
After that — it was smooth sailing. Now, let’s go on to Flutter.
Flutter
Project setup
I have worked a little with Flutter in the past, and I have certain things already installed on my machine. Considering this, I might skip specific parts as I might have them already installed, but I’ll try to cover everything.
Straight away, you can feel that Flutter is much more mature than KMP. The documentation itself is much more easily navigable and straightforward.
Setting up the environment
The instructions for setting up Flutter are located here.
A great thing about Flutter is that it allows you to work with VS Code. I can’t say I’m a huge fan of VS Code since I primarily work with Android Studio in my daily work. But the occasional times that I did have a chance to work with it — I was pleased. Therefore, kudos to the Flutter team for having this option.
To develop on Android, you need to have the following things installed to run Flutter:
- Android Studio or VS Code or IntelliJ IDEA
- Flutter plugin or extensions for your IDE of choice
- Flutter SDK
Compared to the KMP setup — there are many more instructions here, which are much more detailed. In fact, they’re so detailed that they actually overwhelmed me a bit. But it’s better to have more information than having to search for something when you run into a problem.
Just like KMP has kdoctor — Flutter has, you guessed it — flutter doctor. These are handy tools since they allow you to detect problems in your setup without having to check each component individually yourself.
Here’s what running flutter doctor gave me:
At least I have all greens in Flutter 😀
A helpful command for Flutter doctor is the verbose command when running like so:
flutter doctor -v
The -v command will provide detailed information about the status of the Flutter dependencies.
Now, off to the interesting part:
Creating the project.
Here, the maturity of Flutter stands out once again. The wizard is integrated into Android Studio — without the need to download anything.
I had the iOS simulator running from the KMP setup, and Android Studio picked it up instantly. I was able to launch the sample application on iOS straight away. This wasn’t possible in KMP — at least not without some tweaking.
The Android configuration wasn’t picked up immediately for some reason by Flutter, but launching the emulator manually and running the application helped.
All in all — the experience of creating and running the project was a little more delightful with Flutter.
Once again, the documentation for Flutter is much more detailed here — there is a detailed explanation for each button and what it does.
In fact, Flutter documentation recommends you try out their “legendary” hot reload feature.
But this button can be hard to find, and in case you’re wondering where it is — it’s in the bottom left corner of Android Studio IDE.
Conclusion
This was an introduction to our series of comparing Flutter and KMP.
In general, the setup for both frameworks was fairly easy. You can tell, however, that Flutter has already solved many of the things that KMP didn’t automate yet. Also, Flutter’s documentation is superb compared to KMP’s. Once again, these things are not critical to a seasoned developer, but they might be necessary for those starting out in cross-platform development. This is especially important if they don’t have prior iOS or Android experience.
At this point, it’s hard to say whether either of the frameworks has a clear advantage over the other, but things will become more apparent in the following articles.
Thank you for reading, and stay tuned for the next article! In it, I’ll focus on a detailed overview of architecture and state management approaches in both frameworks.
