DEV Community: Felis Cato

(🐱-1-3; HOLD) Flutter, Wewayangan Media Preview

Felis Cato — Sun, 26 Apr 2026 09:07:52 +0000

See how much I failed:

(🐱-1-1; Drop) Media Preview and Converter with Kotlin Compose Multiplatform - DEV Community
(🐱-1-2; Failed, Again) By React Native, Develop Media Preview and Converter (Wewayangan Media Viewer) - DEV Community
(🐱-1-3) Flutter, Wewayangan Media Preview

I get that name with the help of Google Search AI. I just want to find name in Java that resemble "theaterical" and "video". It means Shadowy (bayang-bayang / Wayang). A traditional show of theaterical puppet, where the show is run behind screen and the audience could watch a magnificent ragnarok and monarchy act in white black screen, an imagining of life essence. Or something like that.

Welp, I would not tell you much. I would go with Flutter. First, I need boilerplate or wizard.

You could see project details, MVP, and scenarios here: Alpha Design · Issue #1 · FarhanMS123/wewayangan-mediaplayer

Dear Diary

As usual, I would use Gemini Pro and Google Search AI. Let's just use the same query as previous blog. For you curious, my prompts are:

Please explore thoroughly, use every alternatives keywords similar to these and explore those keywords, explore as much as possible. Every stacks and tools found, try to find alternative or similar things to it. You could try to find on blogs, forum, or community related. Such as Medium, Dev.to, Reddit, or Youtube. At summary, give list of all stacks and tools you found. Please explore:

For Flutter development (keep scope only to Flutter), explore frameworks, bootstrapers, project wizard, scaffolding, boilerplates, templates, starterpack, meta-framework, stacks, tech stacks, opinioned, and battery-ready.

By this prompt, I am not only ask to find a project wizard, I do hunting for every tech stacks available related to the scope I want to found.

Long story short, I found Very Good CLI, Stacked CLI, and Mason. I ever take a look of Very Good CLI and I would use it for this app starter. Not as previous, I would just go with it.

To learn flutter, I would just go with:

I also read and follow:

Honestly, I just left for 2 hours today (15 Jan 2026), and suddenly the whole site changes. I even haven't finish reading the foundation !? So for you, just use 7 Jan 2026.

16 Jan 2026

Ok, I already read the foundation. I take a look to VGV and it already bootstrap Bloc as State Managment. I actually want to try MobX, but well if the boilerplate already giving their opinion, so be it.

In learning project structure, I will try Stacked CLI. Of course, I already do everything in environment setup. I would follow Overview | The Production Flutter Framework.

dart pub global activate stacked_cli
stacked --help
stacked create --help
stacked create app --help
stacked create app my_first_app
stacked create view counter
stacked create view login
stacked create service authentication
stacked create view textReverse
# ... do some form annotation ...
stacked generate

What I got, this Stacked CLI is not only opinioned, but also became wizard and generator for any usecases. I still not see much about state management, but it handles the routing. A perfect match if wants to create a big project. The issues, we follow their architecture. You can tell this is equivalent to NestJS.

Environment Setup

Similar to previous blog to setup Android Studio via Jetbrain Toolbox
Install plugins Flutter and Dart both Android Studio / Intelij IDEA and VSCode. Also, ARB Editor.
I already ever download Flutter, but I will reinstall it again. The flutter with saved in C:\ProgramData\flutter, if not works create a new folder C:\dev. Why? I need a dedicated development folder, close to the root, and has no spaces in the path.
Create a flutter project using very good cli. Honestly, just follow the site until I can run a windows app.
- because I have no site, I would use farhanms123.github.io as organization. Actually, I haven't read if it is allowed in legal practice. Please tell me if I have been criminal because of this.
- I also follow to targeting Windows, and Android. But, now I will flavor the Windows first.

dart pub global activate very_good_cli

very_good create flutter_app wewayangan_mediapreview \
  --desc "Wewayangan (Media Preview)" --org "io.github.farhanms123"

cd wewayangan_mediapreview

# flutter packages get
very_good packages get --recursive

flutter doctor -v

flutter emulators && flutter devices

very_good packages check licenses

flutter doctor --android-licenses

flutter run -d windows --flavor development --target lib/main_development.dart

Default languages will use English, so I do not need localization
The app would be simple, so dedicated folder for state builder lib/{view name}/cubit/ is so overkill. I prefer better to put state builder
Seems I do not know the project structure much. I may need to learn it. Make it more opinioned.

Development Phase

Ok. I start my development. It took long enough to reconsider project structure. I use Google Antigravity and ask Gemini Pro High to make recommendation. Here you go FarhanMS123/wewayangan-mediaplayer: Video Preview, Convert Compressor, and other simple videokit. if you want to see the source and Alpha Design · Issue #1 to give you my plan.

My objective, I always try to figure it out the author of the boilerplates and libraries while respecting their original design.

I want to have dart dot-shorthands, so I need to update sdk to minimum 3.10.0. And also, I want to use Ubuntu yaru. As I works only for myself, its too tiring to make a mockup, so I left all blueprints in my head.

# pubspec.yaml (part of it; just slightly modify)
environment:
  sdk: ^3.10.0

flutter pub get
flutter pub outdated
flutter pub upgrade
flutter pub add yaru

The design is using Stacked, where the media is covering full of its container, by the top of it is floating a navbar at full-top of edge and may full or padding control-player on bottom-edge. Yes, common media viewer, has similar structure like Scaffold with transparent app bar (became navbar) and bottom sheet (control player).

But, instead of wrap navbar and control in a container with expanding gaps, those would just directly became children of stacks with no additional isolation. I have a plan to make the control moveable. My references would going to be:

I need to play a video (video playback), apparently official video_player won't work in Windows. Need replacement:

video_player | Flutter package
Top Flutter Video Player, Youtube Player, MP4 Player packages | Flutter Gems check Windows and Android
media_kit | Dart package
Seems yoru remove title bar in Windows, so I need to install How to Remove Title Bar from Flutter app built for windows? - Stack Overflow
I found this Our Packages | LeanFlutter
When I try to find how ubuntu/yaru.dart remove title bar, it bring me to ubuntu/yaru_window.dart. And I found out it also use window_manager.

flutter pub add media_kit
flutter pub add media_kit_video
flutter pub add media_kit_libs_video
flutter pub add window_manager

I took a long time just to develop primary view. Too much thought and consideration. Need to understand MVP. And now, I have dilemma and questioning why I chose Yaru at first. So, I choose to go with Material.

Now, I am enlighten. Purposely this is my project structure. But, somehow, I feel stray as I want to follow how VGV CLI lead me in the first place, the feature/page folder is directly under the lib/. So, I thought, why doesn't I extend the app/ use-case?

lib/
├── app/
│   ├── app.dart
│   └── view/
│       └── app.dart
├── l10n/
│   ├── arb/
│   │   ├── app_en.arb
│   │   └── app_es.arb
│   ├── gen/
│   └── l10n.dart
├── pages/
│   ├── photo/
│   │   └── .gitkeep
│   └── video/
│       ├── cubit/
│       │   └── video_cubit.dart
│       ├── video.dart
│       └── view/
│           └── video_page.dart
├── shared/
│   └── .gitkeep
├── bootstrap.dart
├── main_development.dart
├── main_production.dart
└── main_staging.dart

Originally, I put all pages inside lib/pages/ and add lib/shared/. For shared, I thought to put like widgets, states, consts, even views, and maybe such functions, etc. But, how about I encourage those inside lib/app/? And those, I propose this structure. I could also put more inside app/.

lib/
├── app/
│   ├── app.dart
│   ├── view/
│   │   └── app.dart
│   └── widgets/
├── l10n/
│   ├── arb/
│   │   ├── app_en.arb
│   │   └── app_es.arb
│   ├── gen/
│   └── l10n.dart
├── photo/
│   └── .gitkeep
├── video/
│   ├── cubit/
│   │   └── video_cubit.dart
│   ├── video.dart
│   └── view/
│       └── video_page.dart
│       └── video_widgets.dart
├── bootstrap.dart
├── main_development.dart
├── main_production.dart
└── main_staging.dart

+0224 Oops... I forgot. If my objective is to not reinventing the wheel, I should find FOSS GPL-compatible media player from Github or the vast internet that works both in Windows and Android.

+0227 As I start building the video functions, I found few challenges:

I have stack, unsized position-container-column, and wish this single Slider component to have width as wide as available space of Container
the components I build has more children and grandchildren
I really want to reimplement photo and zoom feature when I should approach MVP first
as such, I need to keep my hand from migrating the component into a base component
The grandchildren issues arises as MediaKit has player and controller object in view component, while the controller/panel is in grandchild
need find a way to pass object Player and VideoController to context and retrieve by .of()

Then, I find few keywords and links. (thanks to Google AI and my skill to query building).

GOOGLE: flutter material stretch item to width of column
Approaches to state management
InheritedWidget
Linter rules; Find: name, case, flutter

+0228 Seems I need to restructure my best practice for this VGV boilerplate, the use of Context, Provider, ChangeNotifier, Bloc, Multi Blocs and Providers, passing to grand children, stateless pages, and stateful view. And maybe I need to implement Repository-Model pattern.

GOOGLE: pass context; flutter pass context; flutter buildcontext; flutter add data to context; flutter pass object to context; flutter provider context; flutter repository pattern; flutter access parent property
GOOGLE: flutter access parent property via context
flutteris.com/blog/en/widget-state-context-inheritedwidget?ref=plugfox.dev
Simple app state management
InheritedWidget, ChangeNotifier, Ancestor
GOOGLE: flutter architecture; flutter design pattern; flutter mvvc
GOOGLE: flutter service repository pattern
Flutter App Architecture: The Repository Pattern
Flutter Architecture: The Repository-Service Pattern
🕊️ Flutter | plugfox.dev

+0426 It seems this project is takes too long. I have many professional things to do. So I drop this project here. I may add new links and references and notes on the progress and just continue on this post.

You should see all my plans and updates here:
Alpha Design · Issue #1 · FarhanMS123/wewayangan-mediaplayer

You could also follow the commits and repository. Spoiler alert, I may want to learn Event-Driven Architecture, Airflow, and gRPC. So, golang, python, Rust, and Kafka could be next experiment.

Ciaaa~

+0502 I want to add few more list

(🐱-1-2; Failed, Again) By React Native, Develop Media Preview and Converter (Wewayangan Media Viewer)

Felis Cato — Mon, 05 Jan 2026 12:18:38 +0000

You may actually read my unfinish previous post where I try to learn Kotlin to Develop this app. But, now, I want to do that in React Native. I just thought doing in Kotlin (for native performance) is almost overkill. That's why I flee to React Native. But, why RN? It is simple, it is javascript, and NPM has many libraries for every day. Uuh... I mean I want to end this project as fast as possible. You may met me again for other exploration and journey.

Summary. I want to have a battery-ready boilerplate, so of course I go with Expo. Unfortunately, it only support Web (SSG), Android, and iOS. ~~It is not support Desktop. That's why I would (once again) find alternative and go to Flutter. Wish me luck. 🤞~~ Or I would not use Expo. I'll try my best. 🤞

Yes. This is a failed project as RNW is not working. I may not trying hard. Well, let's just go with Flutter.

Written Notes

Ok. I would not wrote much. As before, I would explore RN frameworks, bootstrapers, project wizard, boilerplates, templates, starterpack, meta-framework, battery-ready, scaffolding, stacks, opinioned, and the alternatives. Then, I compare every project structure.

Fast forward, I use Gemini and Google Search AI. It found out: Expo Framework, Infinite Red Ignite CLI, Create T3 Turbo, and Create Expo Stack (CES). Other interesting things: Tamagui Starters, Tamagui Takeout, Solito, Gluestack UI Starter, Obytes Starter, Expo Router Starter, and NativeWind Starter. And last... TheCodingMachine React Native Boilerplate, @react-native-community/cli, NativeWind, and NativeWindUI. Actually, there are much, you could try to prompt them by keywords earlier.

When I do prompting, there are certain keywords pop-up: Expo and Solito. By process of elimination, the one that certainly focused for Mobile development are Ignite, CES, and TheCodingMachine while both extend Expo framework.

Ignite CLI resulting few decision: Code Native Generation or Manual? Expo Router (dep: expo-router; Experimental) or React Router? This boilerpalte is opinioned following Infinite Red's best practice. Which is using MobX as state management. With Demo App, there is additional dependency name expo-application. And with Expo Router, would have main to expo-router/entry. No styling, use react navigation, apisauce, data-fns, and reactotron.
CES/RN-new has: React Navigation or Expo Router? Nativesind/StyelSheet (vanilla)/Unistyle/NativewindUI? Use Zustand? Use auth with Supabase or Firebase? setup EAS? The @react-navigation/ is using stack module. Has .yarn/ and its auto commit.
TheCodingMachine is built on-top of ReactNativeCommunity template generator. The only question: use Typescript? It is not using Expo. But, using Zod, with react navigation, ky, react native mmkv, and reactotron.

I am not need an overkill boilerplate. An Expo Framework with Expo Router is enough. And I need to target Android and Desktop. I love Tailwind, so I may use Nativewind, Uniwind, xor NativewindUI. I also don't need a test suit. In conclusion, I would follow basic React-Expo setup and then take few modules and project structure from these boilerplate.

Not like Kotlin, I already have experience in JavaScript, TypeScript, NodeJS, NextJS, and React. For now, I just need to learn-by-doing to understand Android or mobile skeleton.

Ok. Let's just start.

4 Jan 2026

As Expo cannot have Windows, I need to test few things. I would try to generate Expo, Ignite CLI, CES, and TCM. Then, I follow every modules and principles they have. For a moment, I need the most battery-ready, so Expo + App Router + Nativewind.

npx rn-new@latest rnrnnew --expo-router --nativewind --zustand --yarn

npx ignite-cli new rnigcli \
  --bundle=com.rnigcli \
  --git \
  --install-deps=false \
  --packager=yarn \
  --target-path=C:\Users\farha\Downloads\workspace\temp\rnigcli \
  --remove-demo \
  --experimental=expo-router \
  --workflow=cng \
  --no-timeout=false

Seems I would chose either CES xor TCM. CES would be the first thing I choose. If such ad-hoc use-case need a dependencies, I will imitate one of them (include vanilla and ignite cli). I will document every consideration in next steps.

Environment Setup

I would follow Expo setup environment and React Native setup environment. Similar to previous blog, I use Windows:

Via Jetbrains Toolbox, install Android Studio. Use latest SDK.
Download Jetbrains Runtime SDK with JCEF (JBRSDK-JCEF)
Download Android 15 SDK
Set Environment Variables, use GUI.

ANDROID_HOME=%LOCALAPPDATA%\Android\Sdk
PATH=%PATH%:%ANDROID_HOME%\platform-tools
PATH=%PATH%:%ANDROID_HOME%\emulator

Download Android Emulator. I use Android Desktop Medium.
Generate Expo project with Create Expo State / rn.new

npx rn-new@latest wewayangan --expo-router --nativewind --zustand --yarn

undo commit as CES would commit .yarn/ into it. Remove it first.
Git commit all content inside for initiation, ensure .gitignore exists.
Run npx expo install expo-dev-client and git commit again
Install Expo Tools - Visual Studio Marketplace, React Native Tools - Visual Studio Marketplace, and other extension related to Expo and React Native
Run npx expo-doctor

Everything should already been setup. I would follow few tutorial and guidelines along this app development.

No. Please also do this for React Native Windows. System Requirements · React Native for Windows

Libraries Setup & Framework Preparation

I should say many steps is not shown previously, it includes push branch to Github, Extention already installed, global npm, and fixing missing toolkit from expo-doctor. Goodness, no issues.

The Framework is not fully complete, I want to build to Android and Windows for this MVP. Then, I need to install few libraries.

Good things, Expo Router Navigation is installed by default.
Then, I need React Native Windows, NativeWind, and Zustand/Zod

F**K. Why should I... I should explore it and research it more. In the end, EXPO not working with Windows. Even, the official ReactNativeWindows is encapsulating Electron, like whaaaaaat...

Should I just move on to Flutter? Or I just give up the Desktop one. Why in the world.

Ok. ~~I will start Flutter~~. After this all mess is done, I will wrote some ranting how to choose your first programming language unwisely without following the mainstream "YOU SHOULD START BY THE BASIC!".

4 Jan 2026

Or, no, hehe. I would not use Expo. Just learn by it. Ok, I use CES and following previous steps. One thing should be remember, the initial commit by CES is also include .yarn/. I need to undo commit and remove it first.

I follow everything in system requirements, of course not following scripts. Still failed, even after installing .Net 6 for whatever reason. Then, I gave up and use scripts in node_modules\react-native-windows\scripts\rnw-dependencies.ps1, it install .Net 8 for some reason while not match with the docs. I do it. And finally, still not working.

✖ Building Solution
 ✖ Build failed with message 5:5>LINK : fatal error LNK1104: cannot open file 'C:\Users\username\.nuget\packages\microsoft.windowsappsdk\1.7.250401001\buildTransitive\native\..\..\lib\win10-\Microsoft.WindowsAppRuntime.Bootstrap.lib' [C:\Users\username\Downloads\wewayangan-mediaplayer\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]. Check your build configuration.
 ℹ Gathering MSBuild data for telemetry.
 ℹ Unable to find msbuildproperties.g.json
Command failed with error MSBuildError: 5:5>LINK : fatal error LNK1104: cannot open file 'C:\Users\username\.nuget\packages\microsoft.windowsappsdk\1.7.250401001\buildTransitive\native\..\..\lib\win10-\Microsoft.WindowsAppRuntime.Bootstrap.lib' [C:\Users\username\Downloads\wewayangan-mediaplayer\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
Your telemetry sessionId was ...

Aaa... I still do not know. I want give up for now. This will be archived and next time is about troubleshooting this, doing some Nativewind works, and try to push Expo further. This development of Wewayangan using React Native is failed and ends here. I just want to get native experience and RNW is using Electron is a big no for me.

For now, let's just going with Flutter.

8 Jan 2026

(🐱-1-1; Drop) Media Preview and Converter with Kotlin Compose Multiplatform

Felis Cato — Sat, 20 Dec 2025 09:05:08 +0000

I have issues on Google Photo app. It can play and view most media extensions, such as webm and webp. It could zoom on video, even editing photo. It is great, but there are missing few features. I can speed up or slow down the video, natively taking snapshot on video, or convert or scale down (compress, resize, resolution, etc) space size of media files in bulk. For the conversion, I need it from WebP or PNG to JPEG (lossy MozJPEG) and WebM to MP4. As video size compression or resolution reducer, I need to find encoder similar to png -> jpeg. Seems MP4 in HEVC/H.265/AV1 codec.

As a developer, I choose the most reasonable path I could think of. Yes, reinventing the wheels. But, I am not that blind, so I do research; I mean I ask AI to do the research. For now, only Google Photo and VLC Media that has 2 feature of all missing. I would go to NotebookLM and ask it to do Deep Research, also Gemini 3 Pro, Gemini 3 Pro Deep Research, and Google AI Search.

So, the results are:

NLM: MX Player Pro, KMPlayer Plus, Zoom Video Player, FX Player, OPlayer, Aves Gallery, Fossify Gallery, F-Stop Media Gallery, Standard Gallery, EzyCapture, Video to Photo
G3P: KMPlayer, MX Player, Panda Video Compressor & Converter, Aves Gallery
G3PDR: MiXplorer, Aves Gallery, XPlayer, Simple Gallery Pro
GAIS: KMPlayer, MX Player, Zoom Video Player

Welp... seems what I want to have already exists out there and I need to review each one. Nvm... Let's just coding it.

in this blog, you would follow my elaborated journey in developing this App. I have no experience in Java and Kotlin, so this also showing from the beginning how I start program in Kotlin.

I actually end my journaling and not continue using Kotlin to do this project. Feel free to read my journey in embracing Kotlin Compose Multiplatform.

Uuh... I just give up. Kotlin would be my next project because it involve server action. Unfortunately, everything I wrote in commonMain would not reflect to server. So, I should find a way to connect it. I would try hard everything I wrote, I should not wrote the logic flow once again in server specific-platform. And I don't want to wrote a boilerplate for it. Trust me, I ask Google Search AI. (Jk. I know it slop. I would do proper research when time come)

Framework Exploration

I already have an objective. An MVP of Media Viewer (PNG, JPG, MP4, WebP, WebM) with zoom mode, Snapshot, Speed mode, Converter with Compression and rescaling, and bulk conversion. My additional requirements are name formatting, and Zoom-in frame (and preview) in seek player. Also, cross-platform so I could also use it on Desktop -- Windows and Linux.

As I am playing with Codec, I need a language mature and native enough it has libraries I need. Normally, we will think about React Native (with Expo) or Flutter (not that mature) to solve this. But, I also think about Kotlin Compose Multiplatform (Java is mature), NativeScript (NodeJS via nodify or runtime-node-api, only support Obj-C APIs), CapacitorJS / Ionic Framework (HTML is easier but SPA; Native should use Java and similar). In near native should use Xamarin / .Net MAUI, Android (Java/Kotlin), and .Net (C# / VB) Windows Form.

What I want is single Write Once, run Anywhere. Goodness knows, RN and KCMP may be the best choice. But, I need to consider the app must have a faster cold start, and codec library should have imported to Dart. So, Flutter should be the best choice. Originally, I just want to learn KCMP and disregards what futures I could have if I began to start RN or Flutter or native Android and iOS development like right now. Ugh... the illusion of free will.

Well, then. Puck (the great spirit) it. I will just go... by... ugh Wheel of Name giving me Flutter. So I must go by KCMP ;-) I just want to learn Android development with Kotlin (")> Let's Go!

Starting the Journey

this is journey about learning Kotlin, you could skip to the next session

React Native has Expo Framework, so that Flutter has Very Good CLI. For this one, I don't want to reinventing the wheel, I need a batteries-ready, boilerplate, template, or project generator like NextJS, Laravel, and Spring Boot (with all libraries can be add). Seems for Kotlin, nothing. Or I may have not yet finding these gems. The hunting can go on along the Development as Always.

This is my first time I am going with Kotlin, so I search it. The second list is Kotlin and Android | Android Developers and become the starting point by following every links and the referrals. And those I get to Create your Compose Multiplatform app | Kotlin Multiplatform Documentation; and well... I may need to learn few basics Kotlin first before I continue my journey.

I just know that Jetbrain has JetBrainsRuntime (JBR) that bundled with Java Chromium Embedded Framework (JCEF) by default when installed any Intellij-based IDE. Originally, I want to use Adoptium OpenJDK, but this JBR force me to analyze why it is better.

I tried to find Course in Udemy or any online Course that elaborate Kotlin. What I need is a long Course that explain deeply about Kotlin, a masterclass or bootcamp but not Android Course. Seems most courses only cover basic Functional Programming like Go or Javascript. Welp... It would be just fine to following official docs Kotlin Get Started and following JetBrains Academy Plugin for JetBrains IDEs, and also doing few on-boarding first to know Intellij Idea more. Oh! There actually is Coursera by Jetbrains exists, and it is free. And actually from the Plugin, an actual e-book Atomic Kotlin Learning Resources for the Kotlin Programming Language. Also, Kotlin Courses & Tutorials | Codecademy.

I met few difficulty in running on-boarding sample demo Kotlin and Java. I would follow tutorial hell for this Kotlin and related so I would understand the concept behind it. Seems there is few things that Intellij not setting up. As I said, I never really do Java in best practices except Android Tutorial, and even that, I do JavaScript coding style. I really hate too much abstraction and interface. Put that aside, I need to finish this on-boarding to ensure everything is ready.

All how to setup the project would be put inside Environment Setup. In here I would just raise few question. Even if I said built-in, seems it can't be reach within CMD. So, I would try to refine environment setup. By default it would take JDK from Adoptium, lets change that.

So, JBR with JCEF is just to run the IDE, not development. Meaning I need to download JBRSDK-JCEF from IDE. Well... I assume kotlin is a binary file instead of JAR, but seems not.

What I like about IDEs are they have starter pack or bootstraper of any project they have. Such as Eclipse, Netbeans, Visual Studio, and Intellij series. For now, I am supervising Kotlin bootstraper with Intellij, Maven, and Kotlin. I still figuring out outside download kotlin compiler, how could I get kotlinc via JBRSDK? Oh! also I would use Rainbow Brackets Plugin for JetBrains IDEs

In conclusion, I use Gradle DSL-Kotlin for Multi-Module Build. I love more common project structure with extendable use-case. Next question remains... Could I setup these project in other IDE like VSCode, Ecplise, or Netbeans? Could I code Kotlin Multiplatform without IntelijIDEA? What could be the simplest Kotlin setup and execution to mimick NodeJS and NPM based project? In Gradle based project, I can't see how the terminal execute Kotlin project, but in non-grade I can see it execute Java and import kotlin compile module.

Ok, I already finish learning everything about Kotlin, though takes 4 days. As I already know PHP, JavaScript, and Go; Kotlin actually pretty simple even though it has too many types of classes, like I want to complain you could just need max 3 type of classes, but you have like 5? Why... I only follow Intellij IDEA learning the GUI, inspecting every types of project structure in create project wizard, Inspecting of every Kotlin Use-Case, and learning via Kotlin Tours both beginner and Intermediate. But, not expect I would following OOP and Project Structure best practice of Kotlin and Compose Multi-platform. I would only use the Wizard. And, lets continue to having a quickstart and tours of Kotlin Compose Multi-platform.

Uuh, I actually just see this and Kotlin has actually all resources I need: Kotlin for Education, Learning materials overview, Learning resources. What ever, now I want to compare generating KCMP from Plugin and from KMP Web Wizard with covering all platform. I will use Android Studio to do so. Creating CMP project from plugin in Android result few deprecated on Android Gradle above 9.0.0. Also showing error from KMP Web Wizard, and both has same structure. And for now, I would learn KCMP following Create your Compose Multiplatform app | Kotlin Multiplatform Documentation.

Ok. Already done learning KCMP. The missing pieces of these learning, I just doing "book" reading, while I missing what modules is imported, how to breakdown components, see annotation, classess, or functions behind the logic. I would learn in doing the real works. For additional notes, by long consideration, this project should be done using Flutter or React Native, it is because I do not really need a very native and hard cross-platform solution. I just need Android and Desktop implementation.

The Server and Web

In KMP Wizard, it ask to generate Web (with Kotlin/JS and Kotlin/Wasm) and Server with Ktor. I thought if I make some action in commonMain, then if I serve the web server, the action would run via server. Something like RPC or NextJS React Server Action, which KCMP would generate the endpoints for us. But seems not. The action in button only works in browser and not sent back into Ktor.

I try to explore with Gemini (I am too lazy to explore properly... urgh...), React Native actually has Expo Router and Server Action. Then, Flutter has no built-in and must use Serverpod and Celest. And finally, Kotlin must use Kotlinx.rpc. Seems, I must explore again thoroughly. I have other use-case that I should use Kotlin and write-once, applied anywhere.

Environment Setup

After long consideration, here are few things need to setup:

~~Install JDK, either Eclipse Adoptium Temurin or JetbrainRuntime JRB-JDK via release page or built in Intellij IDEA~~
Install Android Studio via Jetbrain Toolbox
Install extension Kotlin Multiplatform
~~Install Kotlin (kotlin-compiler), could via release or built-in~~
Install SDK via File > Project Structure > under Platform Settings > SDKs. Download new SDK from it, better use JBRSDK-JCEF. This can be accessed when create new project. Recommended to use v21 or v25 in 25 Dec 2025.
Enable KotlinJavaRuntime and then in Project, do Tools > Kotlin > Configure Kotlin in Project

If everything setup, let's generate the project using KMP Wizard.

Blueprint

N/A

Development Notes

Uuh... Sorry. Seems I need to end this here. I should already know when to stop and choose wisely. "You could use any programming language" is actually b*llsh*t as my program is actually simple enough which no need to scale. So, I would go using React Native, not because it is easy, but because it met my minimal my requirement. Actually, KCMP is much more easier enough to learn.

So, I would leave this a piece of junks in here, so you could read my learning workflow. End of journey. Bye!

30 Dec 2025