Fumbling around with Flutter
It’s been a while since I learned a new language so I got two birds stoned at once and built a language-learning application in Dart. As an app, Habla is designed to help you prepare for travel by teaching you a few key phrases. As a project, Habla is just an excuse to learn Flutter.
This is my second exploration of the summer, following Bin Diving. I’ll briefly recount my experience and why it’s driving me to consider Flutter for future projects.
What led me here
React Native pushed me to the edge. I’ve launched applications to the app stores as an individual and a manager; but, recurring challenges and cryptic stack traces have made it less exciting with every release. In the past, my teams have mitigated this by spending cycles every quarter focused on infrastructural tech debt, (to help tackle the regular cycle of version upgrades, etc); but, as a solopreneur or bootstrapped venture this is a less feasible expenditure.
I should mention that Expo can initially make things easier— though I’ve never not wanted to eject. Thus blossomed my curiosity for something new.
Flutter Highlights
Honestly, the most jarring thing you and your team will have to get over is the mandatory semi-colons and underscores. Other than that, just remember that “everything is a widget” and you’ll be fine. To boil it down:
- The syntax is straightforward enough, though more similar to Java than TypeScript
- The ecosystem is surprisingly deep and tight — there is generally a pub.dev package for what you want and not 20 different variants of it…like on NPM
- Scrolling feels great by default; performance was never a concern for me
State Management
Just like in JavaScript land, there are many options for state management in Dart/Flutter. I explored a few but settled on Drift since I was primarily concerned with local-only data persistence, (love me some SQLite).
Drift wasn’t my first stop though: Bloc seemed like the industry standard after some reading. If you or your team has experience with Bloc in another language/framework it could be worth consider; however, it was a bit too opinionated about the separation of certain concerns for my liking. Specifically, the documentation encouraged building many different layers of actions and models and observables before getting to the view, reminiscent of the early Redux days, (like before Redux Actions came out), so I bailed. Boilerplate is not for me, even with Copilot turned on.
Since I firmly believe that everyone just wants to write SQL and view logic, I pushed forward with Drift. Fair warning that Drift used to be called Moor and some documentation was split between the namespaces, including that of a proprietary file format, (now .drift). I would advise against using the .drift file format until they support syntax highlighting in your favorite editor. To my benefit, Drift allowed me to focus my time on the data models and view layers while making the observability bit between them automagic.
Overall, state management was where I spent most of my debugging time. Drift exacerbated this because of their use of generated files, which compounded a single syntax error to mean entire classes were no longer generated. I prefer this over the obscure stack traces of React Native, (even with symbolication).
What does this mean for you and your team? You’ll spend more time debugging the actual errors instead of just trying to find what line actually threw the error.
Scrolling feels great by default
We’ve all been there before: after a hard sprint implementing yet another list view that pulls remote data using an array of annoying filters and sort options, our React Native app stutters when scrolling and hangs on text field interactions. Yes, I know there are solutions to these problems, but let me tell you about a land where they don’t happen (as much).
In this recent comparison of Flutter versus React Native performance you can read what took me a few weeks to experience personally: even with the framework suggested list view mechanisms, (i.e. FlatList in React Native), Flutter achieves a higher framerate at a lower hardware cost.
Speaking of framerate, Flutter also gives you some semi-useful animations by default. For everything else, there are community packages like flutter_animate .
My Unsolicited Opinion
So if React Native is Legos, Flutter is more akin to Mindstorms: you get batteries included and highly functional components in a form factor that makes it harder to shoot yourself in the foot. For reference: Expo is Duplo and native is a ball of clay.
One last notable bit of news: back in May Google did a round of layoffs on the Dart and Flutter teams, (in addition to other areas). This may not mean the end for Flutter, but it should be weighed in your calculation of the longevity of your investment in the platform. But who wants their code to live forever, anyway?
Lastly, check out Habla here on the iOS store! And let me know in the comments if you want an Android release…
