MythBuster : 10 Rumors about Flutter, why it’s not worse than Android+Kotlin ?

florent champigny
Ideas by Idean
Published in
9 min readMar 21, 2019

Almost all mobile developers talk about Flutter, this new cross-platform framework, which can produce beautiful apps in a record-time, promises a 60fps rendering and can export its applications to Android, iOS, Windows, and shortly to HTML !

The problem with Flutter ? Every developer has some myths about it, "I don't want to develop on Flutter because #%&ç*", "No way, using Android & Kotlin we can #%&ç*, but they don't have it in Flutter"

Let’s shed some light on those myths together, and Bust them ! After reading this article, you will be in a hurry to start your first project in Flutter 😉

Myth n°1 “User will notice if the app is native or created with Flutter”
Myth n°2 “Dart is a strange language”
Myth n°3 “Flutter widgets tree is hard to read”
Myth n°4 “You cannot use Gson or Moshi on Flutter !”
Myth n°5 “There are no coroutines on Flutter !”
Myth n°6 “On android we do MVVM with LiveDatas”
Myth n°7 “Flutter generates huge APKs “
Myth n°8 “You don’t have any great libs on Flutter”
Myth n°9 “My SDK is not available on Flutter”
Myth n°10 “Crashlytics is not available for Flutter”

Myth n°1 “User will notice if the app is native or created with Flutter”

Let’s take sample design found on UpsLab :

And use a free movie api to fetch our content & posters : http://www.omdbapi.com

I made the same app using for Android, with some libraries like Retrofit, Gson, ShapeOfView, Glide, GlideTransformations (for the blur) and using Kotlin with Coroutines.

My flutter apps use the only the libraries http and json_annotations. A lot of use cases are already available in Flutter, you don’t need a library to blur a widget, neither to display an image from url, coroutines are available by default, etc.

Which one has been made with Flutter ? You have two hours to give me your answer 🤓

Myth Busted !

You can find the complete source code on Github :

Myth n°2 “Dart is a strange language”

We often heard

“Why the hell google used the dart language for Flutter, nobody uses it”

Firstly, Dart was created by Google 😊 and secondly, it is a very simple and easy to learn ! It’s an object oriented programming language, which really looks like Kotlin at some points :

  • you don’t need to use the new keyword
  • you have nullable operators var name = users[0]?.name ?? "";
  • constructor parameters can be optionals, and passed in random order
  • a dart file can contains multiple classes
  • dart has lambdas / closures (which can reference existing methods)
  • strings can evaluate variables var text = 'hello ${user.name}'
  • const variables defined outside a class are singletons
  • you can override operators like + or ==

For the “missing” features (like extensions functions, ) don’t forget dart is an open source language, the community continue to improve it ! (pssst they’re trying to add functions extensions on the next release : https://github.com/dart-lang/language/issues/41 😙)

Now, try to read and understand the following class, I’m sure even if it’s the first time you read a Flutter class, you’ll understand how it works :

It’s pretty easy to read isn’t it ? Now, you can say with me :

Dart is a simple language to read and understand

Myth Busted !

The complete Dart’s language specifications can be found on the dartlang.org website :

Myth n°3 “Flutter widgets tree is hard to read”

In Flutter, each widget has its utility. You want to add a padding : surround your widget with a Padding, you want to make it clickable, surround it with a GestureDetector. This pattern can scare developers, but it’s really powerful when you want to add just a specific behavior on an existing widget.

Flutter’s widget have a different way to manage their sizes, some views as Center or ListView try to be as big as possible, while Text and Image has a specific size.

You can find more informations directly on the Flutter documentation : https://flutter.io/docs/development/ui/layout/box-constraints

Let’s take an example on this part of the screen :

On Flutter, this part of screen will looks like :

Now if compare it with the equivalent android xml :

It’s kinda similar no ? 😊 and it takes almost as many lines of code ! You can be sure that all android screen can be recreated with Flutter, even if the widgets are not the same. They’re no ConstraintLayout available on Flutter but you have Flex, maybe one day someone will try to create a constraints manager 😎

Myth Busted !

Myth n°4 “You cannot use Gson or Moshi on Flutter !”

Gson, Moshi, Klaxon, Kotlinx.Serialisation, Jackson, FastJson, there’s a lot of libraries used daily by android developers to deserialize JSON into POJOs. We cannot imagine using JSON as a HashMap directly, then use loops to retrieve objects from an API.

Flutter has already a build-in tool to deserialize Json then fill classes using their fields names : json_serializable

To make it work, you have to annotate the class with @JsonSerializable, then optionally you can name your fields (by default it will use the field’s name). You will also need to specify a factory (called to create the object from Json), a default constructor & a method .toJson().

Kotlin class using Gson on the left / Dart class using json_serializable on the right

Myth n°5 “There are no coroutines on Flutter !”

Let’s see how we handle our movie list download. We can create an OmdbRepository, which contains a method to search and download movies following their names.

Android way

For Android, we can use Retrofit with a plugin to handle the request with a coroutine, then fire the http call in a suspend method. The coroutine will be suspended using the .await() method here :

Flutter way

With flutter, we can fire an http call using the method http.get(url), then decode the body using the plugin json_decoder. As you can see the method is annotated with async, and return a Future<List<Movie>>.

The asynchronous method to retrieve the http response is prefixed by await, which is really similar to the previous Kotlin code. That’s the way we do coroutines in Flutter 🥰

Myth Busted !

Myth n°6 “On android we do MVVM with LiveDatas”

Android

We love using LiveDatas on android, components architectures completely changed the way we develop our applications, with the power of MVVM and the simplicity of Google.

On Android, we can create a SearchViewModel, extending AndroidViewModel, which exposes a LiveData<SearchViewState> representing the state of the current view. This ViewModel has a search method, which calls the api then puts the result into the viewState’s public LiveData, updating automatically the Fragment :

MvvM On Android with LiveDatas

Flutter

In flutter, we don’t have LiveDatas… 😫

But we have Streams ! It’s really similar to LiveDatas, and can be consumed by a widget called StreamBuilder.

This widget is attached to a stream, and each time it has a new value, the builder is called, then creates or update the current view hierarchy.

In this project we can surround the SearchPage’s state with a StreamBuilder, instantiate a SearchViewModel, then attach it to the exposed Stream<SearchViewState>

MvvM on Flutter with Streams

Myth Busted !

Myth n°7 “Flutter generates huge APKs ”

Let’s generate an release apk for each framework, using ./gradlew assembleRelease on Android and flutter build apk. Please note that Proguard was enabled for each project, with shrinkResources & minifyEnabled.

Now let’s take a look at the apk sizes :

Android: 3 900 944 octets (3,9 Mo)

Flutter: 5 686 215 octets (5,7 Mo)

Flutter’s APK is 1,7 Mo heavier than the android’s one…

The apk is only 1.7mo bigger, it’s small enough to be overlooked by the user.

I can imagine the face of the flutter’s haters watching this result 😅 Boys, remember when we had this debate about Kotlin on the early versions, the apks was also a few mega bytes bigger than the java-only version 😉

haters…

Myth Busted !

Myth n°8 “You don’t have any great libs on Flutter”

Flutter is provided with its own package provider, the Dart Packages, which has an official website :

You don’t need to search your libraries on Github, Jcenter, MavenCentral like you usually do for Android, here you have all available libs for flutter, with their own installation guide, examples, and especially the popularity of the package (each user can vote).

Please note that almost all libraries handle automatically the permissions requests for each platform, you don’t need to ask yourself for the camera’s permission to take a photo !

Almost all use-cases has already been developed on Flutter

Bluetooth : https://pub.dartlang.org/packages/flutter_blue

GPS : https://pub.dartlang.org/packages/geolocator

SharedPreferences / NSUserDefaults : https://pub.dartlang.org/packages/shared_preferences

SQL : https://pub.dartlang.org/packages/sqflite

Dagger-Like : https://github.com/google/inject.dart

RxDart : https://pub.dartlang.org/packages/rxdart

Firebase / FireStore : https://pub.dartlang.org/packages/cloud_firestore

Notifications : https://pub.dartlang.org/packages/firebase_messaging

Camera : https://pub.dartlang.org/packages/camera

SVG : https://pub.dartlang.org/packages/flutter_svg

Myth Busted !

Myth n°9 “My SDK is not available on Flutter”

Of course, all SDK don’t have their implementation, even more if they are internals. BTW you can wrap your existing android’s SDK in flutter using Channels.

From Flutter you call an async method platform.invokeMethod(name)

Flutter SDK implementation / Channel invocation from flutter

This will fire a MethodChannel on Android, which works like an observableEmitter (or a coroutine’s continuation), you have to pass your method’s name, then match it with your SDK’s and publish the result on the channel :

Flutter SDK implementation / Channel reception on android

And for UI components ?

For design libraries, you have a huge ui toolbox available on Flutter, it looks a lot like the android’s one, take a look :

Custom paint on Flutter

You can find a complete paint tutorial here :

Myth Busted !

Myth n°10 “Crashlytics is not available on Flutter”

To handle crash on a production app, we use Crashlytics, but it works automatically only on java… Flutter does not compile to java.

Fortunately there’s an implementation of this SDK that uploads Dart’s Exceptions to Crashlytics : flutter_crashlytics :

Just wrap your application by this code to handle and send your crash to Crashlytics :

Myth Busted !

TL;DR

You really don’t have to be afraid of the flutter development, even if it’s for an Android-only application, you can start developing it in Flutter, I’m sure you will find it really easy and powerful after some hours of coding !

A lot of companies already started using Flutter in their applications, you can save a lot of time using this framework, and it can be exported on any platform, even on desktop !

There’s actually no limits with Flutter, even if a behavior is not available yet, with the power of the open-source community, nothing it impossible !

If you are like me, you started to develop in Flutter and you loved it, don’t hesitate to send me some claps 👏

Cheers !

--

--