‘Cross Platform’ Hack Day: Google Flutter
By Russell Hicks / CTO @Rantmedia®
Native iOS and Android development is at the heart of what we do at Rantmedia. Both platforms currently offer the most refined, intuitive user experiences in the history of computing — we are living in a golden age of mobile tech, and new developments in augmented reality and AI promise to deliver an even brighter future.
Native development, however, can be a time consuming business — and one of the contributing factors is maintaining a separate code base for each platform. A cross platform implementation that performs more like a native app for appropriate projects would make life so much easier for us mobile developers — and more cost effective for our clients as well.
Our previous dabblings with cross platform solutions have promised a great deal but disappointed in practice — tests with Xamarin Forms and PhoneGap a few years ago were blighted by slow, unresponsive performance on device, poor documentation, difficulty customising stock components and some rather ropey looking UI elements that were very easily distinguishable from their native counterparts — and not in a good way.
Time and tech moves on, of course — and recently there has been a notable buzz surrounding several new offerings. For our latest hack day, we decided to take a look at these cross platform contenders, kick the tyres and see if they would be viable for production applications.
First, we took a look at Flutter from Google, which has been generating great excitement despite its relative youth (at the time of writing, it is still in alpha).
Flutter is still an early stage alpha project created by Google, but has already been used in some high profile production apps — notably for the Broadway smash Hamilton, and for several Google internal apps. Flutter apps are created using the Dart programming language (https://www.dartlang.org/), and will run on Android 4.1 and up and iOS 8 or newer. The whole Flutter offering is centred on speed (both of development, and of the apps themselves), and on beautiful and smooth UI elements that are advertised as “as good as native”. Whilst making heavy use of Google’s material design, it also features widgets (cutely named “Cupertino”) that have an iOS native look.
One of the most interesting aspects of Flutter’s architecture (and the key to its performance) is that it uses it’s own rendering engine to draw widgets — skipping the “translation to native widget” stage that has slowed down many older solutions.
Installation and Tools
Even though it’s still in Alpha, the installation tools and instructions (available at https://flutter.io/setup/) for Flutter have a pleasing level of polish that inspires confidence in the platform. Although there are a lot of additional components needed, once you’ve installed Flutter (by cloning the repo and adding the flutter tool to your path) you can simply run
flutter doctor and a script runs that tells you very clearly what you need to set up — for cross platform dev on a macOS machine, that means Flutter and Dart tools, a Java JDK, XCode with CocoaPods, Android Studio and finally IntelliJ CE with the Flutter and Dart Plugins.
Our test machine was already configured for Android development, so most of the requirements were already met — the longest part of the install process was grabbing the CocoaPods repository (an iOS dependency manager that works a little like Gradle).
As a big fan of Android Studio, another member of the IntelliJ IDE family, I felt instantly at home in IntelliJ CE, and Flutter and Dart plugin installation was a two click process. IntelliJ CE is a mature, highly polished IDE that offers nearly everything you might want from a development environment. It also means that while Flutter itself might be an alpha project, the tools you’re using are stable and well established.
A good starting point to understanding Flutter is that everything is a widget — a text view is a widget, an image view is a widget, a scrollable list is a widget, a screen in the app is a widget — so when you start designing your app, decomposing it like this gives you a way in.
The widget catalogue (https://flutter.io/widgets/) gives you an idea of some of the many components that are already available — a surprisingly comprehensive and well documented selection given the maturity of the platform.
To get up and running, I went through the Flutter codelab here:
It took around an hour and a quarter, and by the end I felt like I understood enough to start pulling together a very simple app.
The brief for our hack day was to try and deliver a list / detail view like this:
Whilst I began feeling very rapidly that the hour I didn’t spend on Dart fundamentals at the start of the day was a very silly omission, I also found it was possible to get some impressive results very quickly, and with very little code.
Taking some of the Flutter example projects as starting points was also really helpful — the Stocks app (https://github.com/flutter/flutter/tree/master/examples/stocks) was the most useful in getting to grips with a multi page app with a list view.
Navigation in particular took a little while to sink in, but the concepts of routes and navigators are very straightforward and well documented. If you are a seasoned Android developer, however, it may be quite unlike mobile navigation as you understand it.
The way you build UI as a series of nested widgets felt eloquent, expressive and simple — I found myself wanting to dig deeper with it, and am already planning some further exploratory work.
There are obvious limits to what you can achieve in one hack day, but with around 200 lines of code we had a working app that deployed to both iOS and Android (albeit using hardcoded placeholder text in many places) — a result I was very happy with.
On both iOS and Android test devices we were impressed by how smooth the app appeared — the consensus in the office was that it was indistinguishable from a native app, both in terms of performance and in the look and feel of the stock UI components.
Whilst this is a very limited demo, none of the performance and UI complaints that have historically dogged cross platform development were present. It’s early days for Flutter, but we think there is a lot of potential here — and we’ll be doing some further exploratory work to try it on some more complex real world apps.