Making a Todo App with Flutter

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

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

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

Hot reload

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

Flutter Basics

Material Design

Widgets

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

Stateless and Stateful Widgets

Modifying State

Image for post
Image for post
The app’s second screen, allowing the user to add a task

User Interaction

Adding a todo item

Removing todo items

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

Result

Image for post
Image for post
The final app

Continuing with Flutter

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store