Making a Todo App with Flutter

Gearóid M
Jun 7, 2018 · 10 min read

Install the tools

mkdir ~/dev
cd ~/dev
unzip ~/Downloads/flutter_macos_v0.3.2-beta.zip
export PATH=~/dev/flutter/bin:$PATH
flutter doctor

Create an app

We will create our app and test it on Android since this can be done on all operating systems, but all these steps will work just the same for iOS.

flutter create flutter_todo
cd flutter_todo
flutter run
Flutter’s “Hello World” app

Hot reload

Flutter has a very useful hot reload feature, just like React Native. It means you don’t need to rebuild and re-run your app every time you make a code change. Let’s see how it works.

home: new MyHomePage(title: 'Flutter Demo Home Page'),
home: new MyHomePage(title: 'Basic Flutter App'),
Flutter’s “Hello World” app with a changed title, and maintained state

Flutter Basics

Now that we know how to run a Flutter app, it’s time to start writing our own. We will go for the classic todo app. As mentioned above, we will be writing in Dart. It is certainly not the best known language, but will feel very familiar if you have used Javascript (especially ES2015+), C++ or Java before.

Material Design

Flutter comes with a package which makes it very quick to start making a Material-style app. It provides a simple way of creating a screen which has a title bar and body. Let’s start by setting up our Todo app to have a title bar with our app’s name in it.

Widgets

This small bit of code shows an important concept in Flutter — everything is a widget. Our whole app is a widget, which contains the MaterialApp widget. Scaffold is a widget which helps us quickly create a proper Material layout without needing to worry about manual styling. AppBar is a widget which accepts a title, and creates a bar at the top of the screen, which is commonly seen in apps. On Android it will align the text to the left, and on iOS it will align it to the centre.

The difference in title bar styling on Android (Pixel 2) vs iOS (iPhone X)

Stateless and Stateful Widgets

To make our app look more like a todo app, let’s show some tasks. You may have noticed that our simple app above is a StatelessWidget. This means that is cannot be changed dynamically. For our todo app, this is no good, because todo items get added and removed all the time. However, a StatelessWidget can have children which are dynamic, which are StatefulWidgets. Let's break out our stateful functionality (the todo list container) from the overall app container.

Modifying State

Now that our app is ready to be stateful, we want to be able to add todo items. To get started, we’ll add a floating action button (FAB), which will add an automatically generated task. Later we will allow the user to enter their own tasks. All of our changes will be inside TodoListState.

  • addTodoItem adds a new string to the _todoItems array
  • Everything inside _addTodoItem is wrapped in a setState call, which tells the app that the todo list has updated
  • TodoList.createState is triggered because the todo list has updated
  • This calls new TodoListState(), whose constructor is build, which builds a whole new widget with the updated list of todo items
  • The app takes this new widget, compares it to the previous one, and adds the new item without changing the other items
The app’s second screen, allowing the user to add a task

User Interaction

A todo app isn’t very useful if the user can only add autogenerated items. Let’s change how our + button works, giving the user the ability to specify their task. We want it to open a second screen which has a simple text box where the user types in their task.

Adding a todo item

Flutter makes adding a second screen quite simple with the MaterialPageRoute widget. This takes a builder function as an argument. This returns a Scaffold, which you may recognise from our existing screen. So, creating the layout of our second screen will be just the same as the first.

Removing todo items

Once the user has completed their task, they need a way to mark it as done and remove it from their list. To keep it simple, let’s show a dialog box when the user taps a task, and ask if they want to mark it as complete.

A dialog box asking the user to confirm completion of their task

Result

The final app allows a user to add and remove todo items, as shown in the video below. The resulting main.dart file is available on GitHub if you wish to use it.

The final app

Continuing with Flutter

In this blog post, I’ve aimed to give you a brief overview of what is possible which Flutter. If you are interested in learning more about Flutter in general, the Flutter documentation is very thorough and helpful, with plenty of examples.

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Gearóid M

Written by

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.