Last week I had a day off work to learn or experiment with whatever I wanted (thanks Hemnet for this perk!), so I sat the whole day with Flutter.

Flutter is a framework created by Google for cross-platform app development. It claims fast development, expressive and flexible UI, and perhaps most importantly, native performance.

As a native Android developer I always approach such frameworks with skepticism, I mean, they can't be as good as native right? Given the hype Flutter has received lately and after watching a few presentations from Google I/O, I decided to give it a try.

And the results are better than I expected.

Getting ready

With so many tutorials online, it is difficult to grasp what's good and what's bad. Especially because it is hard to have a well-defined structure. Fortunately, I found this course at Udacity by Google called Build Native Mobile Apps with Flutter. Sounded legit enough to me.

The course is structured in two sections where they guide you through the basics of the framework as well as the development of some simple app. That's a good start!

Setting up Flutter

It's pretty easy. If you are an Android developer as me, you don't need to do much since you already have Android Studio on your machine. The only thing you will need is to install the Flutter SDK and Dart plugin, which is very well explained in here.

You can also install some dependencies to be able to run an iOS simulator if you are on mac, which is handy since you will be able to run and test the app on an iOS device as well.

What I Liked

It is freaking fast. The hot reload feature it is as fast as they claim to be. It takes under a second to reload a screen on the device/emulator, so when it comes to tweaking the UI it's just amazing. When we speak about native development, it depends a lot on how well and modular your project is set up. But it doesn't take milliseconds, even when using the `Instant Run` feature.

Moreover, even when you need to do a clean build it takes nothing with Flutter, about 2~3 sec.

That for me a big win!

I also experienced that It's very fast to come up with something, i.e. Prototyping. There are things on native development requiring certain overhead, even with almighty Kotlin 😍, not to mention with Java 😪. Can't tell much about native iOS development, but I assume the experience should be similar.

After one or two hours I came up with an app which had a bottom navigation bar, showed a list of items and even had a details page for them. Considering that it was the first time I was touching the framework and Dart, the programming language used in Flutter, I think it's a pretty decent outcome for a newcomer.

Resources and Community

To my surprise, everything is very well documented! Every single widget, how to use it and so on. I really liked they have a guide for both Android and iOS developers, in which they map how to go from native to their implementations. It's a long Q&A section basically, which helps a lot when you sit there the first time and try to "translate" things from native to Flutter.

There is a surprising amount of packages and plugins I was definitely not expecting for a framework which is not even officially released yet. Many of them are in beta or even alpha stages but still, it's a positive thing to see.

The community is great, there are so many videos and articles on Flutter that can help you get started and developing specific features without so much hassle. Same with Stackoverflow!

What I Didn't Like

There are few things I reacted with, but I can say the first one was the programming language. On Android development, once you switched to Kotlin there's no way back to Java. Kotlin is much more expressive, concise, safe, easier to read and write and so on.

Then comes Dart.

Dart feels exactly like going back to Java. Well, perhaps not that much, but very close. Writing semicolons at the end of each statement? really?

There are features I missed from Kotlin such as extension functions, data classes and lack of null-safe types among other things. Also, it feels way too overloaded with parenthesis and curly brackets, but I understand this is how Flutter is made, which brings me to my second point, Layouts.

On Android native development you usually declare your layouts in a declarative way on an xml file. This helps with separation of concerns and it is a good practice for a reason. In Flutter, everything is poured into the code 😨. Sure, you can do that as well on Android, but you do not do it. Why? It is a mess!! Just look at this example taken from this tutorial on Building Layouts in Flutter:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Oeschinen Lake Campground',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  'Kandersteg, Switzerland',
                  style: TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          Text('41'),
        ],
      ),
    );
  //...
}

You don't need to understand everything in there, but it basically represents the following item on a list:

List item layout.

If you look at that code for few seconds and dissect it step by step, it becomes easy to understand. It's just messy, but not hard. What's basically doing is creating every element on that layout, including all the visual elements and properties you would normally add on the xml file such as `padding`, `backgroundTint`, `textColor` and so on.

The way I started solving this mess was to create functions that would return the desired `Widget`, so instead I would have one line of code instead of all that many. There's also another solution I was suggested over Twitter:

Moving on.

Architecture. Working with Flutter felt like the early days of Android development when there was no clear app architecture when there was a lot of code in activities and all possible best programming practices were violated. The good thing is that we were there once, we know what works and what doesn't.

Google recommends using a pattern they called BLoC (Business Logic Component). There are two good videos on that from the Google I/O and DartConf. In short, this pattern aims for placing all business logic in one component, exposing Streams through reactive components to be consumed by the `View`, which shall be dumb.

Of course, you could also apply other patterns such as MVVM or MVP. The important thing here is to have separation of concerns, which will make the code easy to maintain and develop upon.

You need to be very vigilant in Flutter since it is very easy to mix things up due to the nature of the framework.

Conclusion

After eight hours of playing around with Flutter I can say it was an interesting experience and I totally recommend it. Is it as good as native? I can't tell for sure since it was not the aim of my experiment, but I can definitely say it didn't feel as smooth as native. At the same time, Flutter is in its very early days (RC2 at the moment) and considering Google is behind it I believe it will get much more love in the future, which will make it better than it is today.

Is Flutter for you? That's a question that can be answered differently based on what you are looking for.

If you are a startup or someone who is trying an idea, want to develop an app for both Android and iOS at a fast pace with tight deadlines, then Flutter is for you. I think it is a very good tool for prototyping, and that was actually the reason why I started looking into it.

Are you a well-established company wanting a faster pace of development? Perhaps you should look into hiring more (native) developers. I could argue why but it would take another blog post 😅, advantages and disadvantages of native vs cross-platform development is something I will cover in another post.