flutter

Why developers should consider Flutter for their next project

Introduction

If you’re a lead engineer starting a new mobile project you will surely have considered the use of cross platform technologies reduce your development time and staffing requirements. The go-to solution for this recently has been either React Native or Xamarin, but now that Flutter is stable and mature it’s fast becoming one of the main contenders. 

So what is Flutter exactly?

Flutter is Google’s platform for building cross-platform mobile applications from a single, compiled codebase. It uses the Dart language for development and can also target the desktop and web from a single codebase. It uses a reactive, component-based development architecture that scales well, especially when used with the Bloc pattern for state management.

So we’re gonna have to learn a new language?

Our experience so far has been that Dart is actually one of the main advantages of using Flutter. It has most of the niceties you’ve come to expect from modern languages such as strong typing, type inference, async/await and the IDE support through VSCode or Android Studio is excellent. You’ll pick it up in no time, especially if you already have JS / Java experience, and you’ll be supported by the excellent first party documentation and tutorials. 

So why use Dart in the first place?

One of the main benefits of Dart is that runs with both JIT (Just In Time) and AOT (Ahead Of Time) compilation. AOT compiled languages like Java and Swift typically require a compilation phase for the whole program before the app can be deployed, which slows down the develop and test cycle. JIT languages like Javascript are compiled just before they’re used, so deployment is rapid but there will be a slower startup speed as the compiler does its work for each file before it’s executed. Because Dart can use both, Flutter benefits from the best of both worlds - rapid ‘hot reload’ deployment during development, and runtime optimisation with AOT compilation for release builds.

Another consideration is that languages like JavaScript need to use the JavaScriptCore engine provided by the platform provider (Google or Apple). For security reasons the JavaScriptCore on iOS does not have access to writable executable memory, which makes perfect sense from a security perspective but severely impacts performance by precluding even JIT compilation.

So why would I use Flutter over React Native?

Flutter follows the same reactive development architecture as React Native and also supports hot reload for rapid development. Flutter developers tend to use the Bloc architecture rather than Redux, which can be the source of a lot of complication in React Native apps. 

React Native renders all of its UI using platform-native widgets, and the only way for it to do this is to use the performance-crippled JavaScriptCore and pass all instructions through the process boundary using a native bridge. Flutter compiles to native code and accesses platform APIs more directly, avoiding the need for the native bridge performance bottleneck. It also uses its own rendering engine, so engaging animations and custom designs are straightforward to implement and move naturally at 60fps.

So will my app feel native to the user after implementing with Flutter?

Flutter has historically shipped with the Material Design widget set as default, which is well thought-out and complete. It makes a great starting point for custom app designs that work well across iOS and Android with minimal platform-specific changes.

More recently the Flutter team have release the Cupertino widget set, which more closely mirrors the UI and interaction paradigms of iOS. The Cupertino widget set is surprisingly complete, and a good option if you plan to spend the extra effort to put together a truly native-feeling app. In practice we find that a sprinkling of Cupertino widgets over a customised Material UI more than enough to please a typical iOS user.

Sounds good, where can I start?

Google has done an excellent job with the developer on-boarding experience. The Flutter environment is straightforward to set up at the command line, and the ‘flutter doctor’ command will check over everything including IDE plugins. The codelabs are a great way to get acquainted with the framework and concepts interactively, and the reference documentation is complete, if a little concise.