Utterly Fluttergasted

Last year, October 2017, we made it very clear that we are not cross-platform developers and sparked a passionate discussion. At that time cross-platform framework just could not offer the quality that we always look for.

Well, things change. Here we are: December 2018, writing an article on a cross-platform solution. What? Did we change our minds? No! We are still not cross-platform developers. We are, and always have been, multi platform developers: we create for Android, iOS, web, TVs, smartwatches, and more. And so we’ve always been quite fascinated by new cross-platform technology. Earlier this year we were introduced to Flutter, and Flutter is a whole other beast that requires special attention — hence this article.

Stefan and Eliza just got back two weeks ago from the rainy London where we attended the Flutter Live event! For those who don’t know: Flutter is Google’s open-source UI toolkit for creating beautiful, blazingly fast and native experiences for various platforms from a single codebase.

In this article, we’ll explain how we fell in love with Flutter and brief you on the exciting things revealed during the live event.

TL;DR

Did Flutter change our minds? Don’t get us wrong, we are sticking to our “we are not cross-platform developers” statement, but Flutter has so far been a very pleasant surprise. At Pixplicity, we used Flutter to build a lot of beautiful prototypes blazingly fast. Having the platform reach 1.0 status made Flutter a very viable option for many of our projects. Let’s dive in to why we support Flutter, and why Stefan was featured in the promo real of Google in support of Flutter, twice!

Cross-platform: yay or nay?

Flutter does run into some of the arguments we made against going cross-platform. For example, it is an immature platform (literally just got out of beta during the Flutter Live event), libraries are not as readily available as for native apps, and the latest changes in OSes are probably supported faster in the native SDK. However, other cons are circumvented or already solved:

• The code-to-run cycle is crazy fast. Crazy fast. Really.
• The performance is insanely good.
• There’s lots of documentation and tutorials available.
• Thanks to Google pushing this product hard, a lot of libraries are already supported.

Furthermore, Flutter was initially designed as a rapid prototyping tool which is exactly the ‘notable exception’ we gave in our original article.

The Technology

Flutter is cross-platform because you can write once and deploy to desktop (Mac, Windows and Linux), mobile (Android, iOS and even Fuchsia) and soon to web as well — more on that later¹. Unlike most other cross-platform technologies, it does not use the underlying host platform for pretty much anything unless you want to interface with the hardware or platform APIs. Managing the device’s hardware is delegated to the host platform, whereas handling business logic and drawing to screen is done completely by Flutter. Flutter uses its own graphics engine, called Skia², which takes care of all the graphics rendering. This is a solution seen most in game engines such as Unity or Unreal, but not in solutions targeting ‘regular’ interfaces, which clearly sets it apart from the rest. The framework is bundled with widgets that are made to look and behave exactly the same as the ones everyone is already familiar with. In order to use platform-specific APIs, e.g. for accessing the camera or showing notifications, you write plugins in the native languages Kotlin/Java or Swift/Objective-C, or pick from many packages already available.

¹) Flutter’s Engine is window toolkit agnostic. Users can build Flutter embedders on platforms that are not supported out of the box (like iOS and Android). There are a couple of open-source projects for Mac and Windows Engine Embedders.

²) Skia is an open source 2D graphics library developed by Google that is also used by the Chrome browser.

From Android developer to Flutter developer

With both of us coming from an Android background, if you ask us what sets Android apart, it’s its community. The tens of thousands of libraries, tutorials and blog posts freely available for everyone. The numerous meet-ups and conferences. The fact that there’s no chance you’ll shoot a question and not find someone to help out. Is it a bed of roses? Of course not! But is any kind of development, really? Wouldn’t it be too boring if something was very easy? Wouldn’t it feel like doing the same tasks over and over again? Sometimes it feels like the only reason we actually became developers is because it’s challenging, head-scratching and sometimes nerve racking. Maybe it’s just us! 😅

A developer needs just a few things to be happy: an IDE that doesn’t make their life miserable, a build time that will finish faster than the song that just started to play, a language and a platform allowing you to build the boring parts fast, and sufficient amounts of good coffee! Although Android is doing a pretty decent job with all the above (minus the java ☕), Flutter has nailed all of the above, especially the build times. Hot reload is probably our numero uno favourite feature!

Two developers, two opinions

Stefan was the first one in the team to pick up Flutter and wanted to give it a spin. This is his experience in discovering the platform:

Honestly, this was one of the best calls we made this year. As we were exploring Flutter, I was falling in love with it more and more. In the span of literally a couple of days we got practical experience with state management, theming, customizing existing and making our own widgets, dipping into platform specific APIs, using a RESTful service, JSON (de)serialization, using local assets, saving data to disk and even creating animations. All of this, of course, impressed management, who came up with the great idea to put Flutter into practice during an upcoming design sprint. We built a prototype in a day, shippable and installable on devices. No Invision-based clickable mockup but an actual app you could download, share and install.

Eliza on the other hand remained skeptical about Flutter, right until the Flutter Live event. She explains why:

If you’ve been following the Google Developer communities (aka GDGs) for as long as I’ve been (almost 6 years), you probably remember a series of events that were popping up in a lot of countries named “Google Developer Days”. At those events, Google was putting all the effort in pushing Dart as the “next big thing” and the “most amazing cross-platform solution.” However, it wasn’t… yet. A few people started experimenting with it (including me). If you ask everyone what made you to give it a go, that was probably the support (tutorials, online editor, etc.) they had. And then, one day, that site and the tutorials disappeared (¯\_(ツ)_/¯). So when Flutter came around the corner (or as I saw it then, a new promotion of Dart) I wasn’t too sure about it.

Flutter Live 2018

There were a couple of big announcements during the event, including:

• Flutter finally hitting 1.0
• Hummingbird, Flutter for the Web
• Flutter desktop embedding — Flutter on MacOS, Linux and Windows
• New tools and SDKs for Flutter developers

Flutter 1.0

The stable 1.0 brought us tons of bug fixes, some new features and more polish to Flutter. Now, iOS folks can enjoy the improved Cupertino widgets and for those who are using Firebase, there is already 1st party support for quite a lot of Firebase services. The Flutter team managed to improve the performance of the framework and also reduce the overall app size. If you didn’t know, all flutter apps bundle the Flutter toolkit together in one package.

Platform views have been improved and now with added iOS support (apart from Android which already existed) — allowing us to embed platform specific views into a Flutter app. With this, the team also started expanding into writing plugins like Google Maps and WebViews.

Hummingbird

We were very pleased to hear that the Flutter team is busy on delivering us a web-based implementation of the Flutter’s runtime, called Hummingbird. This gives us the power to deploy a Flutter app to Web without any code changes! Yegor Jbanov, a software engineer from Google, wrote a technical blog post about it.

Flare

We’ve visited a lot of presentations, but we don’t think that any of us had their jaw dropped to the floor until this one: just watch this demo by Filip Hráček.

His app, “The history of everything”, demonstrated absolutely stunning animations, not to mention the ability to embed playing video as well as platform views into those animations! We thought that it must’ve required a humongous effort to pull that off, and sure it was for the framework and library devs, but luckily not for the everyday developers from now on. This showcase was the perfect segue to what the guys from 2Dimensions built: Flare. Flare is a tool that allows developers and designers to create insanely fast, butter smooth vector animations for apps, games and web with full Flutter support!

Flutter + MLKit + Flare

Another thing that left us speechless was the ease in integrating Firebase’s MLKit and Flare into a Flutter app. Maurice Parrish live-coded a demo on stage that demonstrated how to track a person’s face, detect whether they are smiling, winking or tilting their heads, and used the result to animate his virtual character, created in Flare. Now, that is pretty damn impressive as well!

Codemagic

Lastly, another announcement worth mentioning is the first cloud-based CI/CD tool exclusively for Flutter: Codemagic.

“Our idea was that without any deep technical knowledge, app creators should be able to easily configure the whole flow from Flutter platform to their end users at Google Play or App Store.” — Triin Kask

At Pixplicity, we’ve used Flutter to build a lot of beautiful prototypes fast. Having the 1.0 release out of the door made Flutter a very viable option for many of our projects. If you like our approach with new technologies like this, contact us at welcome@pixplicity.com.