A Web Developer’s Take on Flutter
One day at the end of January 2022 I stumbled on a YouTube post by the Flutter team about a hackathon (PuzzleHack to be precise) that encouraged learning Flutter while building an application for the web platform.
Flutter, an open source framework by Google for building natively compiled, multi-platform applications from a single codebase; looks (code-wise) and feels like any other popular web framework. Dart programming language’s syntax is very intuitive for a JavaScript/TypeScript proficient developer and one will quickly find himself at home. The Flutter framework, albeit having well documented APIs and Widgets (Flutter’s representation of Components), one has to dig into its best practices in order to fully unlock the framework’s potential.
In this short post I would like to share my experience developing my Flutter Puzzle Hack entry, “Sliding Scene," where I challenged myself to participate in the hackathon in order to learn and explore Flutter through practice.
The Ecosystem
Dart and Flutter’s official package repository, pub.dev, contains a large and documented ecosystem that is constantly growing. I was impressed by the amount of available tools at my disposal, where every package had more than just a quick Readme. Most packages contain available examples for simple and complex use-cases.
The first thing I did, which will later turn out to be a time-consuming mistake, was to look for a Game engine built on top of Flutter. The first search results in Google & YouTube suggested the Flame Engine 1.0 that was released in conjunction with the hackathon’s announcement. Flame Engine provides APIs for handling game loops, rendering lifecycles, effects, collisions and other modular components. I thought I was at luck because the engine was very intuitive. However, it does require some proficiency with Flutter. Flame is an engine I will definitely keep my eye on.
Without referencing the sample puzzle code project that Very Good Ventures Team shared, I would have struggled to complete this challenge. There were two reasons, however, which made me not use the sample project as a starting point: I like to figure out as I go what structure works best for me; and the sample project relied heavily on the Bloc state-management library.
For the same reason I decided not to embark on a bigger adventure and learn how to use the Flame Game Engine; I passed on attempting to understand Bloc’s architecture. I needed a state management library that a React/Vue developer like myself would already be familiar with that applies the Flux Architecture. Luckily, flutter_redux exists. Putting the state-management library dilemma aside allowed me to focus on my two main goals: finish the project and learn Flutter’s core APIs.
One thing I regret though, which my fellow colleagues will probably never forgive me if they find out, is that I haven’t taken the time to split the state into multiple stores, but shoved the whole game state in one store. If you happen to skim through the code, please accept my apologies in advance.
Out of the Box
As mentioned above, the Flutter team made a wonderful job with both designing the APIs and Widgets, and making the documentation accessible and up to today’s standards. The official Flutter website contains documentation for a vast amount of pre-existing Widgets. Some widgets even have a short (and entertaining) video about its usage and best practices.
With a tiny bit of research I could implement animations which I imagined having not-so-long after. With Flutter it feels like everything could be animated. The APIs even allow you to create your own custom implicit or explicit animations. Fortunately, I was not required to create custom animations since my desired animations were already covered by the available Transition and Animation widgets.
Warning: Spaghetti Code
(Almost) everything in Flutter is a Class. States, Styles, Interfaces and Widgets can all look the same. This makes hard to distinguish between them, and without clear guidelines, widgets rapidly turn into spaghetti code. The part of me that wanted to have the entire Widget tree encapsulated in one file instead of navigating between multiple files won more and more as I approached the end of the project. Just take a look at the Leaderboards Widget in my project’s repository and witness the mess I managed to create.
On the other hand, Flutter’s declarative UI composition makes it easier to imagine how your UI will look like before the hot-reload kicks in (technically, in development mode for web platforms you have to initiate the hot-reload/restart manually, but I assume you get my point). Flutter also supports various IDEs (through extensions) and has an impressive IntelliSense code linter & formatter that stops you from repeating silly mistakes.
Noteworthy: Rive — Vector Art & Animation
Throughout the development process I knew I wanted the puzzle tiles to contain some kind of animation once the player manages to place a group of tiles in their correct position. Giving up on the Flame Engine certainly made it look impossible to accomplish. This is where Rive saved the day.
The Flutter team held live stream info sessions on YouTube scheduled throughout this month. I noticed that in one of the sessions the speakers will be from Rive. This made me do some research about what is Rive, and come across a presentation on YouTube where Rive is demonstrated and integrated into a Flutter application. I was fascinated by how easily one can animate vector graphics and programmatically control them via the Rive’s runtime libraries. Through Rive’s web tool one can export a .riv file to be used in various supported languages. In short, you create an SVG with simple, or complex, animations that does not affect your application’s performance or bundle size. For instance, my project’s .riv asset is only 21.1 KB.
Animating or drawing easy is not easy, and despite having zero experience, with a bit of patience and the help of Rive community members on discord I reached satisfying results. It takes time getting used to Rive, but the fact that it’s completely free for individual users and can be used in various languages compensates on its learning curve.
Conclusions
Flutter is a an emerging framework for building multi-platform applications. The team behind Flutter promotes it actively through social media posts (YouTube, Twitter, etc.) and activities (such as the Hackathon mentioned above). It is apparent that feedback is constantly being gathered and improvements are being made.
If you like challenges, I urge you to keep an eye out and participate in the next hackathon by the Flutter team. For me, it was the best opportunity to get a glimpse of the framework’s advantages and disadvantages. It left a good impression and is probably my go-to framework the next time I will have to prototype an application in minimum time.
