I’ve been playing with this tool for some time, but not enough to have a thorough understanding of it. So, as I’m writing this post, I’ll actually be learning along with it. This post is about a framework that can be used to build mobile apps for iOS and Android using a single codebase. “Is it React Native?” — you ask. No, it is not.
Flutter
verb.
(of a bird or other winged creature) fly unsteadily or hover by flapping the wings quickly and lightly.
Flutter is a tool made by Google to build Android and iOS apps sharing the same codebase. It is a brand new tool (at the time of writing, it was in Release Preview 2), built to compete with React-Native, Xamarin and other tools.
Is it better than any of those competitors? I actually don’t know. My experience with those tools is close to non-existent. But, as a huge fan of hipster-driven development methodologies, I had to try this.
I came across Flutter for the first time by accident: I was scrolling through my YouTube feed and, as a subscriber to the Google Developers’ YouTube channel, there was this 1 minute video suggestion that I clicked by accident. The video was about a specific feature of Flutter I can’t recall. What I do remember is that I was instantly amazed by how simple it was to build Material Design apps for Android. Only later did I found out it was actually doable for iOS as well, in a video¹ of a keynote on DartConf. And so I became a pain-in-the-ass-evangelist for Flutter.
Flutter and applications built with Flutter are written in Dart, a programming language made by Google too. They say Dart will look familiar if you are used to JavaScript. I don’t really agree with that, but what do I know?
Well, enough chit-chat. Cue the drum roll and let’s start.
First we need to install Flutter on our machine. That’s easy:
Download the Flutter SDK and extract it to a folder of your choice.
Next we’ll need to make the flutter binary accessible. We should add its parent folder to our $PATH variable but, if you’re lazy like me, you can add a symbolic link (symlink)² to your /usr/local/bin folder by running:
$ ln -s /path/to/extracted/folder/bin/flutter /usr/local/bin/flutter
And that’s it! You have just created a symlink to the Flutter binary in your /usr/local/bin folder. Placing a binary in that folder will make it available everywhere by calling just its name.
Now, if you run flutter doctor on a terminal, Flutter will check if you have the required dependencies for it to work. It will tell you to install Android Studio and XCode, and other stuff. You should follow the platform guide to install everything. It will also look for IntelliJ IDEA/Android Studio or Visual Studio Code and, if you use any of them, it will recommend installing plugins for them (take a look at the guide to configure your preferred editor).
We are now ready to try Flutter! In a terminal, run:
$ flutter create todo
$ cd todo
Now, open a Simulator or connect a device and run flutter doctor to check if it’s detected and ready to use. If so, run
$ flutter run
and voilà, there you have a Flutter app running. By default, the flutter create command generates a boilerplate app with a floating button that increments a value show in the center of the screen.
Now would be a good time to take a look at our application code. Dart works with an entry-point, i.e., everything starts on the main() function present in this lib/main.dart file. Open and check it out. It should look something like this:
The code is filled with comments and they explain well what everything is and what it does. I do feel there’s one comment missing from the top of the file:
In Flutter, everything is a widget.
There are two types of Widgets: Stateful and Stateless. The first type are widgets that hold state, and the other kind don’t (duh) and both can have one or more widgets as children — a Flutter app is structured as a widget tree.
In the second part of this blogpost series, we’ll build a to-do app using both Stateful and Stateless widgets³. I hope you’ll stick around.
¹ This video may be outdated and some of the code it shows may not work as expected.
² Adding directories to your $PATH is more useful when you want to have access to a bunch of binaries that are in the same directory.
³ There are popular state-management libraries for Flutter like Redux, but they are an overkill solution for a simple project like a to-do app. We’ll take a look at them another time.
I love building products and I found my place to do so at Runtime Revolution. If you are interested in who we are and what we do, make sure to reach out!
Top comments (0)