Our first impressions on Flutter

Published in

in-Tact

5 min readMay 13, 2019

This article is the second of a series of articles that we are publishing about cross-platform development.

The goal of this article is to share our first experiences with Flutter and our point of view about its interest for web and mobile developers. We are not going to talk about Flutter details, performances, pros, cons and so on… there are a lot of articles on the internet about theses subjects.

What is Flutter ?

Flutter is an open-source mobile application SDK created by Google. It allows to build native apps on iOS and Android from a single codebase by providing:

An heavily optimized, mobile-first, 2D rendering engine
A modern framework inspired by React
A set of high quality Material (Android) and Cupertino (iOS) widgets

Flutter is written in Dart and is completely open-source.

How does Flutter work ?

Flutter uses its own rendering engine to draw widgets. (No WebView or third-party widgets)

Most of the framework is platform-agnostic. This means:

Less platform-specific bugs
Less integration issues with some OEM specific Android implementations
You can read the code
You can customize the code

Flutter uses Dart!

Dart strengths:

Ahead Of Time (AOT) support → Efficient native code for production
Just In Time (JIT) support → Fast development cycles with stateful hot reload
Fast allocation → Efficient handling of small, short-lived objects
Easy to learn and well documented
Lot of good quality packages: https://pub.dartlang.org/

Flutter is already used in production by some major actors (Google, Alibaba, full list here: https://flutter.io/showcase) and the ecosystem of third party plugins is growing: https://github.com/flutter/plugins.

Let’s build our first app with Flutter

We use PropertyCross, a set of specifications designed to compare mobile application frameworks, that allows us to create basic app with common features. Even if the implementations are not maintained anymore, it’s a good start to test a framework.

You can find the complete code of our project here: https://github.com/IntactProjects/flutter_playground

A strange first Impression:

Fortunately, the IDE (Android Studio, IntelliJ, VS Code) do the job for you :

QuickFix
Autocompletion
Widget Wrapping
Widget Tree Indentation

The secret is to create widgets as components per feature to keep a good readability.

Doing the same thing with Flutter and native code

Supporting the notch feature (iOS and Android)

We use the SafeArea widget included in Flutter:

Animating screen transitions

Using the Hero Animation component of Flutter (https://flutter.io/animations/hero-animations/):

Create 2 Hero widgets with the same id (tag)
Use the Navigator to change the screen

It’s easy with Flutter as it’s an “out of the box” animation.

To do it in native, with iOS for example, we would have used the UIViewControllerAnimatedTransitioning class (https://developer.apple.com/documentation/uikit/uiviewcontrolleranimatedtransitioning)

It means:

Creating a CustomTransitionProtocol (for instance) to get source and destination views
Implementing this protocol in source and destination View Controller (push and pop effects)
Creating an animation that implements UIViewControllerAnimatedTransitioning protocol

Load source and destination views (put them into a container view)
Create your animation: translation, zoom, whatever… (do your stuff))

4. Setting the animation to the NavigationController

You need to prepare more stuff to do this. iOS animations are powerful but more complicated to create.

Some bits of React Native

Styling components has similarities with React Native

But Flutter has an official navigation component…

Flutter Navigator widget is by default included in Flutter (https://docs.flutter.io/flutter/widgets/Navigator-class.html).

In React Native, there are many (too much…) third party options to handle navigation.

For now, the best one is Wix solution, the navigation is fluid as it has a Native behavior but boring to set up (Android + iOS)

Our opinion!

😃 What’s good?

Great IDE support (IntelliJ / Visual Studio Code)
Hot Reload actually works!
Extensive widget catalog
Very good documentation
Google is investing a lot on the platform

😟 What’s less good?

No access to native views (yet)
Less popular than native / React Native (yet)
Not as confortable to use outside of an IDE (deep nested widget tree)
Some performance issues in debug
Release mode only support real devices

To go further what we would like to try:

BLoC architecture
Multiple languages
Interaction with custom native code (Platform Channel)
Complex components (Camera, Map, WebView, Audio, Video)
Complex animations

Should you switch your favorite framework for Flutter?

For a .Net developer, the learning curve of Flutter can be hard and the gain is close to zero as with Xamarin Forms (for small apps) and Xamarin Native you can build iOS and Android applications with your favorite .Net language.

For an Angular developer, learning Ionic can be a great choice but with a big limitation on performances, as it uses a WebView.

For a ReactJS developer, it’s more interesting to use React Native even though some Flutter concepts are very similar to React (styling for example) and Flutter has the advantage to be more straightforward(you don’t have to choose between 3 navigation components)

For a native iOS and/or Android developer, it starts to be mandatory, in 2019 to know at least one cross-platform framework as they are more and more powerful and popular.

Conclusion

Since December 2018, the version 1.0 of Flutter has been officially released (current version is 1.5) and Google just announced Flutter Web during Google I/O 2019! Flutter is ready for building production applications but we should keep in mind the current limitations of the platform. For now, it’s not as mature as Ionic or as popular as React Native, however it’s important to keep an eye on it as Flutter evolves quickly and Google seems to push it a lot.

The first article of our series about cross-platform development can be found here: https://medium.com/in-tact/an-overview-of-cross-platform-development-frameworks-3d91f6c9b854