DEV Community

Felis Cato
Felis Cato

Posted on • Edited on

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

#devjournal #flutter #showdev #sideprojects

See how much I failed:

  1. (🐱-1-1; Drop) Media Preview and Converter with Kotlin Compose Multiplatform - DEV Community
  2. (🐱-1-2; Failed, Again) By React Native, Develop Media Preview and Converter (Wewayangan Media Viewer) - DEV Community
  3. (🐱-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
Enter fullscreen mode Exit fullscreen mode

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

  1. Similar to previous blog to setup Android Studio via Jetbrain Toolbox
  2. Install plugins Flutter and Dart both Android Studio / Intelij IDEA and VSCode. Also, ARB Editor.
  3. 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.
  4. 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
Enter fullscreen mode Exit fullscreen mode
  1. Default languages will use English, so I do not need localization
  2. 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
  3. 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
Enter fullscreen mode Exit fullscreen mode 
flutter pub get
flutter pub outdated
flutter pub upgrade
flutter pub add yaru
Enter fullscreen mode Exit fullscreen mode

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:

flutter pub add media_kit
flutter pub add media_kit_video
flutter pub add media_kit_libs_video
flutter pub add window_manager
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

+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).

+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.

+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

Top comments (0)