Initial experience creating cross-platform apps with Flutter and Dart

I set out to build a proof of concept cross-platform app. The idea is a small tangent of a larger app I’ve been mulling over for a while.

App Spec

The app very basically, needed to consist of some custom input sliders to measure and record a particular metric each day.

The idea was to record a rough estimate of where you have spent your time today, so as to be able to reflect on where you spend your time in relation to your perceived priorities and adjust accordingly. I wanted to experience of filling out the app the be as smooth and easy to do as possible.

React Native

React Native was the obvious first candidate, I’m comfortable with the React ecosystem on the web, so leveraging it for mobile apps seemed like a good option. I found a couple of React Native slider components, but the options just didn’t seem native looking and didn’t feel native performing enough, very mixed in terms of support and a bit odd and rough.

Also I began to be aware of quite how different React Native is from writing React code for the web. While it uses the same React paradigm, there’s still a lot of differences. It seems performance is reduced significantly as your application and the react framework is controlling all the high level rendering functions from within a JavaScript control thread.

Flutter — Initial thoughts

Looking into Flutter.io I noticed from it’s FAQ, that Dart compiles to native code on both android and iOS. Sounds awesome for performance and that native feel.

Flutter doesn’t actually render your platform specific controls, instead it features a sophisticated and optimized rendering engine of it’s own and renders it’s own controls. This sounded like a strange choice to me at first, even after reading their rational of not wanting to be bound by the intrinsic specifics of the platform controls themselves.

So Flutter is actually pushing pixels itself, sounds strange, but it works —

First thing I did is download their sample app and run through the setup guide, installing the IntelliJ IDEA plugins and try to build it. I already had some Android dev tools installed and setup was a surprising breeze! Very quick and painlessly, I had their example app showcasing a catalogue of their pre-made widgets, animations and functionality.

I was seriously impressed with how easily it had just been to build the Flutter sample app and deploy it to my device + emulator. Equally impressive is the performance and completeness of the catalogue of native looking widgets and examples they already provide. Serious potential!

Still I was very dubious about the necessary time investment to learn a whole new framework (and language!), I wasn’t looking forward to it, I wanted two use what I knew, I wanted to focus only on the product not the tech stack. But the lure of a React-inspired, fast user interface development and a ready made component library was too great a lure. I decided to see what I could get done in a day, it’s Saturday after all and allowed to experiment.

Writing Flutter & Dart code

Dartlang seems very JavaScript like at first, which made it easy to chop around with and Flutter’s method of building a component tree and rendering it based on state was very React like.

I soon realised If you know React, you can hack in Flutter.

There are indeed differences as your start to delve deeper into Dart and Flutter, some even very pleasant ones.

Let’s start with the not so pleasant ones.

Component Layout

Part of Flutter’s layout system borrows much from Flexbox, so you can re-use that knowledge. While I don’t doubt it’s very powerful, I experienced it can get quite tricky to a first user. A few times the layout has has exploded on me, seemingly mostly to do with unbounded box constraints, I’m still learning it’s subtleties here.

It does have a visual helper of sorts

and the ability to dump the render tree textually to help debug these sorts of issues, but regrettably and understandably nothing quite as kick-ass as Chrome Dev tools.

Also, slightly more advanced layout with animations quickly lead me to using the Sliver classes which I don’t feel are documented well enough. It would be great if the IDE could help us a bit more here on catching rendering issues, (by checking types?) before actually rendering.

Still kudos to the Flutter team, their mix of debugging options and errors got me there in the end

Despite that, there is a lot about Flutter to love! Hot Reloads, Fast compiles, Helpful error messages, IDE integration, A good catalogue of widgets and…

Dart

oh Dart!!

Among the Dart things I like:

Optional types
String name = ‘Bob’;

Fat arrow functions
bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;

Positional, Optional & Default parameters
void enableFlags({bool bold = false, bool hidden = false}) { //... }

Then we also have Futures and Streams for async, Mix-ins, Generics, a sensible import system.

Perhaps just my personal taste but I love their choices. Python as much as I enjoy it, has its warts, and while JavaScript has come a long way over the years, still doesn’t feel as elegant.

Dart seems to have picked a lot of the best language features for it’s own. I’d even go as far to say it’s my new favorite programming language. I found it very quick to adapt to from JS.

More Flutter

After only 3 days work, I had a functioning cross platform mobile app :D

Day 3 was largely just spent getting the components to save and reload their local state. I found a decent Flutter SQLite library but still spent a little while doing data mapping to my application.

Had this been now and not a few weeks ago, I would have been delighted to just reach for Firebase Firestore instead, which I see already has a Flutter implementation :D

Helpful error messages and debugging

The live debugging is really great to use. At one point I struggled to understand why my components were not updating their state.

Thanks to the debugger, I was able to see the my state was being passed correctly to my widgets, and deduce that they weren’t being re-created and rendered. Turns out this was a Key issue, much like needing to specify a key when generating react components

IDE integration

Overall, the Dart/Flutter plugins for IDEA are really brilliant and alleviate many of the little errors one might otherwise make. The auto-completion is great!

Flutter is still alpha though so there’s bound to be some little bugs along the way, sometimes the flutter run process would crash and I’d need to restart the app. Another little one, I couldn’t work out why in this case the inspection was complaining this wasn’t a function. I’m not sure if this is a bug or my reasoning.

Working Prototype

So after just a few short days, with already knowing JavaScript and React, I was able to use Dart and Flutter with no prior experience of them to build a cross-platform mobile app. :D

This was enough for me to decide that Flutter wins this particular battle.

While I haven’t written off React Native completely, as it does seem a little more mature and certainly more widely adopted, Flutter has really impressed me and I’m bound to use it in the future.