Flutter: Two birds, one stone

What’s Flutter?

Flutter is a front-end framework based on Dart. It takes the Dart code and translates it super quickly into JavaScript, which is, of course, cross-platform. We like Flutter a lot, so we want to talk about it in this Blog.

We discovered Flutter on our first real business trip. Back in 2019, we somehow were offered tickets to the WeAreDevelopers Conference in Berlin and thought: “Why not?” The trip turned out to be quite profitable. When we saw at the Google presentation about the brand-new Flutter framework and which apps were already realized with this development kit, we were totally stoked. We were on the verge of deciding whether we should build Quinn with Swift and Java but chose to give Flutter a try. It’s been one of the best decisions we’ve made.

Material & Cupertino

The most significant advantage of Flutter is that it’s cross-platform. That means you need only one code base for all platforms. That means you save 50% on development time for apps you create for iOS and Android. Flutter, of course, avoids these names because it’s open-source and instead uses “Material” and “Cupertino” to designate the respective UI elements. By default, your apps will look more like Android Apps than iOS apps, since for Android Apps, it is also the standard to use „Material“ Design. What sets this cross-platform devkit apart is that you can still use native features like Face ID or Google Pay via specific plugins.

The awesome part is that, even though you have your Dart codebase, you can still inject bits of swift and java code into your application. Every Flutter project makes it possible for you to edit the Swift project as well as the Java project. This also works the other way around. If you want, you can create a widget in Flutter that people can then integrate into their Android and Swift apps with their package manager. Crazy right?

Since recently, Flutter can also output stable HTML. So you can design a homepage, iOS app, and Android app in one framework. That makes it three birds! (If you remember the headline. Also, what a horrible idiom! Instead of throwing stones at birds, you could create your own Dash Avatar here.)

Everything is a widget

… except Table Rows. That cost us quite some nerves. But back to the positives, the easily understandable widgetization of functions and elements makes development elegant.

But what does it mean? It’s pretty simple: Everything that you can see on your screen is a widget. That means every component, sub-component, sub-sub-sub-component, and so on. Following this easy principle makes creating the front-end very intuitive since you can always rely on the abstraction of a widget. Additionally, you can capitalize on this pattern and create your own „widget“ class so your components can inherit from that, giving you even more freedom. We did that for debugging reasons, but the opportunities are countless.

Sizzling hot

Hot Reload is a great feature that lets you test your app seamlessly while programming. With other devkits, you must do a restart to see applied changes in your app. Here you can see the changes within the build methods of an existing widget instantaneously. Besides the apparent practicability of testing your code in real-time, this invites you to experiment with your designs, which is excellent for creativity. This is a feature that might be well known from React or Vue apps. Whenever you press “save”, the framework injects only the parts that need updating into the editor. As a result, creating a layout has never been easier.

🔥🔥🔥

Another asset of Flutter belonging to the Google family is the inbuilt support for Firebase. In general, the platform is real powerhouse, that can take care of the whole backend of your app: you can use it as a database, as a push WebSocket and for many other tasks. We use Firebase mainly for user statistics (“How many times was the app opened by our users?”) and notification services for our non-profit app Hilfma (“A helper in your area has been found!”). An advantage that should not be overlooked: It’s free (as long as you don’t need premium features like machine learning) and thus pretty great for up-and-coming companies.

Projects

We designed Quinn and Hilfma with Flutter. Both apps run on Android and iOS, and the development windows for both apps were very tight, albeit for different reasons. For Quinn, we could provide a fully working prototype of the app in just three weeks, while with Hilfma, we had over 5.000 active users on the live app, less than a month after writing the first line of code. What both projects share is a focus on a clear and easily understandable User Interface. Working with Flutter allowed us to build comfy environments for diverse end-users. This way, Flutter has saved us a lot of time, which is the best thing you can say about any tool.