On the Google I/O ’17 Google introduced us Flutter — a new open source library for creating mobile applications.

As you may know, Flutter is a solution for creating cross-platform mobile applications with beautiful UI. Flutter’s way of designing views is similar to the web applications, so you can find many analogies to HTML/CSS.

Accordingly to their promises:

Flutter makes it easy and fast to build beautiful mobile apps.

Sounds great, but at first look, I wasn’t very convinced about another cross-platform solution. We have many of them — Xamarin, PhoneGap, Ionic, React Native and so more. We all know that there are many options and all of them have some pros and cons. I wasn’t sure if Flutter will be something different from them. But I got surprised.

Flutter has many features that can be very interesting from the Android developer point of view. In this article, I’d like to show you some of the things that really involved me. So let’s start!

Why Flutter?

You may be curious and ask yourself a question:

“What’s so innovative about Flutter? How does it work? How is Flutter different from React Native?”

I’ll not cover technical topics here, as it was done much better by the other people. If you’re interested in how Flutter works in details, I encourage you to read this article: What’s Revolutionary about Flutter? You can also check wrap-up of Flutter concepts in “The Magic of Flutter” presentation.

In the shortcut, Flutter is a mobile SDK that allows us to create cross-platform mobile applications (so you can write one code and run the app both on Android and iOS). You write code in Dart, a language developed by Google, which looks very familiar if you used Java before. Instead of XML files, you build layout tree like this:

As you can see, a layout is built from components (Widgets) that are nested. The core Widget is MaterialApp (that’s the whole application), then we have Scaffold (that’s the main layout structure), and then inside we have AppBar (like Android Toolbar ) and some Container as body. Inside body, we’ll put our layout Widgets — Texts, Buttons, etc.

That’s just the cut-off. If you’d like to read more about layouts, check Flutter’s tutorial on building layouts.

#1 Hot reload

Okay, now let’s begin!

We’ll start with the basic application. We have three buttons, every one of them changes text color: