Flutter First Steps

I bumped into Flutter first time several months ago. I remember this moment very well: “Oh, yet another cross-platform mobile solution. Useless. Bye.” And completely forgot it.

Few months ago I found interview with Adam Barth co-founder of Flutter in FLOSS Weekly. After this discussion I decided to give it a chance and started Flutter.

I chose a calendar app as a PoC project. I did quite similar app when studied Android/Kotlin year ago. The app consists of:

• monthly and daily calendar layout
• details of event
• user form to create new events
• local storage for events

Here are results.

Flutter is fast

Layout works fast on both platforms. I couldn’t see any downgrade in performance between native Flutter and very native Android implementations.

Flutter has great UI programming model inspired by React

React-style is simpler than iOS/Android models. To build almost similar monthly layout for Android I wrote view-related ~370 loc in Kotlin.

140 ./MonthlyCalendarContainerFragment.kt

187 ./MonthlyCalendarFragment.kt

43 ./MonthlyCalendarGridLayout.kt

And with Flutter and Dart ~147 loc.

147 ./calendar.dart

Example layout code in Flutter for this screen:

Of course layout code isn’t bigger in Android:

But in addition to layout we need fragments, view initializations, dagger and so on. As a result twice more code. Less code, less bugs, less development time. Not bad.

Flutter supports hot-reloading

On my home laptop mbp 13' Android Studio/Xcode can rerun small applications after changes in one file in about 10 seconds. It’s the best case. On some big projects any changes take at least 2 minutes on more powerful mbp 15'. What’s about Flutter?

Performing hot reload…

Reloaded 1 of 471 libraries in 752ms.

Performing full restart…

Restarted app in 800ms.

You don’t need to recompile native projects, Flutter reloads code instantly in less than 1 second. What is more interesting hot-reload saves the state of application: you don’t need to navigate to current screen or re-enter data in forms. It’s amazing.

Flutter uses Dartlang, simple language with type safety

Dart was designed to be obvious and simple (in opposite to JavaScript). I spent couple of days to become familiar with Dart.

Flutter has very good development tools

Flutter inherits a lot of tools from Dart: autoformat, linter, debugger, IntelliJ IDE and Visual Studio Code supports. My favourite one is code analyzer. I remember how its configuration is painful on iOS and Android. But here I only added one config file `analysis_options.yaml` and it started to work out of the box in console and in IDEs.

I found a lot of great features, but it would be dishonest not to mention problems I met.

Flutter increase app size

Flutter doesn’t use platforms existing UI infrastructure. As a result you need to embed into applications whole framework. In debug mode it is ≈ 25MB, in production ≈ 7mb. I don’t think it’s a critical problem, moreover I guess once Flutter will be released, Android and Fuchsia will have this framework by default.

Lack of plugins and libraries

Flutter is very young. Therefore it’s impossible to compare number of plugins for Flutter with iOS/Android libraries. Every week few new plugins are added, but currently about 60 packages are available. Also it’s possible to use some Dart packages that are not rely on other frameworks such as web. For me main issue was lacking of storage options (one package with basic sqlite support and one key-value storage). One more important thing is no map widget in Flutter, you can work with maps only from native Activity/UIViewController.

Alpha version

You have to be careful, actively development platform is less stable rather than mature ones. I found a bug with text input, it had been introduced the day before. Flutter team fixed next day. Be ready to such situations.

Despite obvious disadvantages Flutter is great step forward in mobile development. I compared my own experience with it and native iOS/Android development, and for me Flutter is a winner:

• simple reactive UI model
• fast development cycles
• matured development tools
• write once, run everywhere