The Fluture is Now!

How I discovered Flutter and why you have to try it.

Last summer, Thomas Abot, did a presentation of Flutter during a team meeting at work. He exposed his feelings about this mobile app SDK and why he thought we had to watch it carefully.

I was very skeptical at first:

- This SDK is written in Dart (with a thin layer of C/C++ code). As a C# developer since the beginning I wasn’t thrilled by the idea to throw out that beautiful language and create mobile apps with a JavaScript-like one.

- It was unveiled in 2015 and it was still in alpha (and it hasn’t changed at the time of writing this post), so I thought it would stay in this state for a long time.

- You have one code base for iOS and Android. Everything is rendered with Skia, the graphics engine for Google Chrome and Chrome OS. So your UI is the same on both platforms. OK good, but what about the platform guidelines?

We didn’t have a live demo of it at this time and I wasn’t so curious about it, so I didn’t look further.

In November 2017, I read a tweet about a Microsoft veteran who joined Google to work on a competitor of Xamarin. The veteran was Tim Sneath and the competitor: Flutter.

I immediately thought: “OK, Google doesn’t laugh anymore, it really wants to play in the big leagues with Flutter!”

So I started to go to https://flutter.io/ and read the different sections.

After browsing the widget catalog, I said to myself “OK it looks promising, let’s try it!”:

I cloned the Flutter repo, ran flutter doctor , downloaded Android Studio, the Flutter plugin, launched the gallery app and let the magic begin.

The Flutter Gallery app

The deployment on my Android emulator was pretty fast, nothing compared to a Xamarin deployment.

I wanted to test the hot reloading, so I changed a color, saved my modification, and... fell in love ❤️!

Hot reloading in Flutter (https://flutter.io/hot-reload/)

⚡️ Hot reloading

This feature is really amazing. I thought the Edit & Continue in Visual Studio was good, but this is simply astounding. Only with this, I think a mobile developer can be two times more productive.

This is really a game changer for me. When I deploy my code and it takes a long time, I lose my focus, I do something else and when I come back to the simulator/device I have lost track of what I wanted to test.

What’s more frustrating than losing 5 minutes to move a control by 2px? With Flutter this is no longer exists.

For some reasons hot reloading does not work in every situation, so you have to do a full restart, but even this is really fast.

🔍 Third party source code exploration

After playing with hot reloading, I wanted to know how they implemented some widgets. I navigated to some component declaration from my IDE and I could see and debug SDK and third parties source code!

This is maybe usual for some developers, but for C# developers this really great. I don’t count how many time I had to go the GitHub (or CodePlex) repository of some NuGet package, hope that a branch or a tag matches the version number of the package and read the source code to know what was going on.

A few days ago, I was able to find a bug appearing only on Windows, on a third party package, pretty fast thanks to this. I immediately made a PR with my simple fix and without the ability to debug external code, I think I would have just opened an issue.

I adore that kind of development environment that don’t slow you down.

🙈 No markup language for UI declaration

I never loved GUI builders, I always declared my user interface through markup languages like XAML because I want to be in control of what it’s generated and I can quickly find what I’m looking for.

I preferred markup languages to code because you immediately see the visual tree of your screen and it’s more condensed. On the other hand it’s difficult to debug, and you don’t always have the auto completion.

Flutter came with a delightful solution: There is no markup language. You declare your interface through dart code, but thanks to the composition you can see immediately your widget hierarchy.

I find this really smart because you have one language that is also suitable for describing your UI.

But there is better, in Dart 2, they made new and const keywords optional, so the previous code can be rewritten as:

This is straightforward and easy to read.

Thanks to composition widgets are themselves often composed of many small, single-purpose widgets. This is really powerful.

👓 Flutter Inspector

In the way Flutter that was designed, your views will have a huge amount of widgets and if your application changes a lot, it can be difficult to understand layout issues.

To help the developer, they created the Flutter Inspector and it was featured in a talk at DartConf 2018:

Flutter Inspector talk at DartConf 2018

This tool is amazing, it let you select a widget in your app, see where it is inside the widget tree and directly navigate to the code where it was created!

You can even virtually toggle the platform (iOS or Android) and observe the changes.

🚀 Performances

So we can be more productive than ever with these kind of tools, but wait what about the performances? We don’t all have 6GB of RAM in our devices, a Flutter app have to be smooth in low cost devices otherwise all of this is for nothing.

You can run Flutter in different modes (https://github.com/flutter/flutter/wiki/Flutter%27s-modes):

- In debug mode, the code is interpreted, and changes in your code are automatically deployed.

- In release mode, the code is compiled ahead of time to offer the best performances.

There is no code interpretation in release mode, so this is very fast comparing to other cross platforms solutions.

I tested some Flutter apps on an old 4.4 Android device, and it was pretty smooth, and it’s so good to have a Material Design app in a KitKat phone 😍.

🎨 Design examples