A Simple To-Do List App — Flutter

Flutter is a cross-platform development framework ideal for building mobile applications. Flutter was created by a team at Google and utilizes the Dart programming language. To see who else is building with Flutter you can view their showcase here: https://flutter.dev/showcase.

In this post, I will be explaining how to create a simple to-do app using flutter. If you have not installed flutter and seek assistance, there is a well documented guide here: https://flutter.dev/docs/get-started/install. Once you have completed the setup we can get right into creating our application.

Creating a Flutter App

For this tutorial, I will be using Android Studio as my IDE. Flutter offers plugins for several IDE’s including Visual Studio Code & IntelliJ. I will be running the app on a Pixel 2 Android Virtual Device, however it will work for iOS as well.

flutter create todo
flutter create --org com.xenonlabs todo

These commands will create a basic flutter app that can be installed on your device / emulator right away. The second command specifies an organization parameter which will setup your package name as com.xenonlabs.todo vs the default com.example.todo.

Reconfiguring the package name is challenging later on. While this step is optional, it is important to note that it will not impact any of the code we are about to write.

Running the App

To run the app you need to load an AVD which can easily be done in Android Studio.

• Open your project in Android Studio
• If you do not already have an AVD you can create one from Tools > AVD Manager
• I have a Pixel 2 AVD running API 28. Now once your emulator is running you can simply hit the play button and watch the app install

Once your AVD is running you can also launch the app from the command line using flutter run

Flutter Skeleton App running on a Pixel 2 AVD

Programming in Dart

At last, some coding. We are going to modify the main.dart file located in the lib directory. The templated code here is what we saw when we ran the app earlier.

Replace the code with the following snippet and then run the application.

Material App with App Bar

After running the code you can see that we now have an empty canvas with an app bar titled To-Do List. Now we want to get into creating our todo list.

Flutter & Widgets

The most important thing to note about flutter is that everything is a widget. Flutter applications are themselves just widgets. It might take some time to get used to this kind of programming but it speeds up the development process.

Stateless widgets are sufficient when a widget does not need to be updated dynamically but for a to-do list application the list will be constantly modified. Consequently, we need to implement a stateful widget.

Update your existing code to match the following.

Stateful Widget

You may have noticed that we now have two classes now for our TodoList . This has been done to help maintain state.

When flutter wants to update a widget, it will rebuild the entire widget. To save state we would need two classes, one for the widget itself and one which creates the state.

So by having a separate state class we can update our todo list without losing our data.

Now we will implement our todo list functionality in the State class.

State Class Functions

Functional Breakdown

You can now run the app and start building your list. Let’s take a closer look as to how this code really works.

• In the build function we have added a ListView Widget to populate the body of the Scaffold . The ListView comprises a children property that takes a list of widgets as the value.
• The getItems functions iterates through our todo list titles List<String> _todoList and creates a ListTile widget for each title, compiles it into a list. Following this the function returns the compiled list to the ListView .

This function will get called every time the state is updated and the widget is recreated

• We utilized the Floating Action Button to handle the functionality of adding items to the to-do list
• It calls the _displayDialog function which displays a dialog for the user to enter the item that will be added to the _todoList
• To do this we need to call the showDialog function which alters the apps state to show a dialog. It takes two parameters context and itembuilder. We pass in the BuildContext from the build function, and AlertDialog to the item builder parameter.
• itemBuilder must return a type of AlertDialog and there are many variations but we will be using a simple AlertDialog, with a title and content parameter. For the content, I am passing in a text field with a TextEditingController to listen to and store the values of the editable text field. I also added action widgets CANCEL and ADD. When we cancel we pop the dialog off the stack to remove the overlay and return to the original screen.
• When I add the item to the list, I wrap it in a setState function which lets the app know there has been a change in state and it will then rebuild the widget.

Result

The final result can be seen in the demo below and the full code for the main.dart file can be found here.

Next Steps

In this brief tutorial, I have demonstrated the potential of the Flutter framework. If you are interested in furthering the application, I have listed potential areas for continued development below.

• Use Shared Preferences to save the data locally
• Use a remote database like Cloud Firestore to store the data in the cloud
• Define your own theme
• Implement Edit & Delete functionality

https://www.twitter.com/FlutterComm