Building a cross-platform todo mobile app using Flutter
Tags: flutter, dart, mobile
Published: 2018-10-30 14:59:07

---
title: Building a cross-platform todo mobile app using Flutter
published: true
description: 
tags: Flutter, Dart, Mobile
---


![Photo by Andrea Reiman on Unsplash](https://thepracticaldev.s3.amazonaws.com/i/yfuqrhx5j462q3ieyv6d.jpeg)
<figcaption>Photo by Andrea Reiman on Unsplash</figcaption>

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](https://flutter.io/) 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](https://facebook.github.io/react-native/), [Xamarin](https://visualstudio.microsoft.com/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’](https://www.youtube.com/user/GoogleDevelopers) 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](https://www.youtube.com/watch?v=w2TcYP8qiRI). And so I became a pain-in-the-ass-evangelist for Flutter.

Flutter and applications built with Flutter are written in [Dart](https://www.dartlang.org/), 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](https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.9.4-beta.zip) 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](https://flutter.io/setup-macos/#platform-setup) 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](https://flutter.io/get-started/editor/#androidstudio)).

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.

![Flutter boilerplate counter app running on iPhone XS Simulator.](https://cdn-images-1.medium.com/max/2000/1*aEegE8iHOq6HNxpKhFr84Q.png)

<figcaption>Flutter boilerplate counter app running on iPhone XS Simulator.</figcaption>

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:

{% gist https://gist.github.com/guivazcabral/46afb50e816a104c3ac4326ebc8e41a3 %}

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](http://www.runtime-revolution.com/). If you are interested in who we are and what we do, make sure to reach out!*