Trying out Flutter (finally) + Thoughts on Learning in general

Blog.
flutter
app
July 2022

"I have the greatest idea..."

The intention was that one day I had the idea to make an app where you could jot ideas or thoughts intuitively in the modern tech setting. Basically ended up being an idea of an application that you can talk to yourself. This then became a great deliberate procrastination activity for me, running away temporarily from storyboarding/script editing/body mechanics/rigging. I was so motivated because I genuinely needed the app to fit my daily workflow. Figured out the Models/Views and very basic mock ups quickly (not even in figma but scribbled with procreate lol). Then from there, it was research.

Flutter / Kotlin / React Native

Out of the 3, I only tried React Native few years ago, but really like trying out of nowhere without an idea to develop, or what. And that totally reminded me of when ARKit was released in 2017 (!) I went for ObjectiveC to develop an alpha-to-the-max app with it, but that was it for my ObjectiveC journey. When Kotlin was announced as the first-class citizen for Android last year, it was news only, not something that was *that* exciting to the extend that I'd read all the documentation at once. And then for Flutter, you must have heard of it somewhere even if you don't follow news.

The glorious Skia

What I understand the way that Flutter works is that it is not using the approach to translate your code into platform-specific UI elements (eg. not converting javascript with bridge like for React Native). It is instead, rendering everything with Skia engine. Everything you read, "scroll", click, it does not matter which OS you're on, as long as Skia is compatible, it'll draw everything on the canvas with Skia independently.

Customised Lure Strategies

For whatever means of learning, the best way is always to have a clear "purpose" every step of the way, even if it is not your eventual goal, or there is a bigger goal. You can alter your direction along the way, but you need to get started. Start small, and even if you have the best discipline in the world, forcing yourself to stay motivated is difficult, so to keep yourself genuinely interested/motivated, the easiest way is to find something that you enjoy doing, an idea or things that keep you excited that you may not even be able to verbally explain why. (this is so drifting away from the original intention of this piece).
It is not about picking up the framework, or the language. Ultimately you want to make use of the framework/language to do something, similar to learning a foreign language. I have a stronger bias over foreign languages at this moment because I am once again trying to go deeper into Thai, which around a decade ago I tried and failed. Reflecting on what went wrong that time, probably it was because I did not have a lot of "hooks" that blended with the Thai I learnt. More Thai movies, shows and songs are available nowadays and everything I consume leaves me with new vocab, dialogues, and most important - grows my interest in Thai culture - which is now my "why learn Thai" reason atm. It'd probably change down the course, but for now, it's flowing for me.

Flutter is lovable

Back to Flutter. I probably spent a week figuring out the whereabouts of the framework/language, and then moved on to building a mobile app (the talking to self app) and then turned one of my react web apps into a MacOS app. So far, I am loving it. I want to figure out what I loved about it, speaking from the perspective of someone 1. learning it in 2022, 2. coming from a frontend background, 3. with lots of time atm.
The "figuring-out" period was all about the flutter cookbook. Flutter has an amazing catalogue of "cookbooks" which splits the main topic of interest into small projects where you can focus on one thing at a time. For example, if you want to understand state management, the learning experience shouldn't include too many layout problems, "how to fetch and display long list", how to do network calls etc. Trimming the area of focus as concise as possible, in a way that you can debug easier. Imagine if you're trying to learn about CSS in React but you are unable to start your app because of a webpack problem? so should you focus on researching on webpack or continue your original intention but there isn't a choice as you can't even start your own app (so codepen comes in handy for situations like these).
Another thing I instantly loved was the flawless (so far) integration of VSCode with flutter. You debug, read documentation, get snippets as hints, lint, start simulator...No back and forth between different applications, maybe except stackoverflow.

MacOS Application

Not knowing MacOS was only recently added to flutter (only from May 2022!), I was genuinely surprised by the compatibilities, at least for the talking-to-myself app. The app uses local DB (SQLite), so no network calls but only IO on the device. UI-wise - it's almost like you were expecting a desktop web application to fail miserably if you hadn't considered the mobile layout (or didn't do "mobile-first" as they call it", and when it did not fail but worked exactly the same as a mobile application, the level of joy/surprise overflows.
Experimentally building the mobile app as a MacOS app sparked a thought to convert a client project that I originally delivered as a web app. The client project was a thermal printer printing service integration. Browser printing is very limited, if you need to tweak the printer paper sizes, probably you'll need to play around with CUPS, and printing off the browser means using the web's printing API. Turned out customising print paper sizes with flutter is a piece of cake. What you want to be built can be built. So far it is giving me a great time, and it sparks more ideas.
Side notes on MacOS development with Flutter. Somehow, if you use Avenir on MacOS everything looks better. The declarative UI of flutter is very easy to pick up, but if to do more customisation, you must drill into the themes or a full-on design system for the widgets.

My loop(s) around Flutter

I have the habit since ages that I'd loop the same song all over again. There's two for flutter this time. "Fon Tok MaiI have the habit since ages that I'd loop the same song all over again. There's two for flutter this time. "Fon Tok Mai"(ฝนตกไหม) by Three Man Down, the song name translates to "Is it raining". Three Man Down's vocal is bit husky, which I like so much, and it actually resembles the voice of RubberBand's no6 a lot. The other song that I have been looping is "Dai Tae Nuek Tueng"(ได้แต่นึกถึง) by Only Monday. The name translates to "In my mind only" (something like that lol). I don't understand anything but only can pick up words like "sa bai dee mai?", "wani", "mai kao Jai" (:laugh:), but music is the element in life that you don't really need to understand fully linguistically to get immersed after all :D
Watch on YouTube
Watch on YouTube
This channel does amazing covers of Thai songs, and his version of Dai Tae Nuek Tueng is very hooking.
Watch on YouTube
Latest
Built with Gatsby ^5.3 + Notion Email 📥 Twitter 💬 Github 👩‍💻 LinkedIn