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 todoflutter 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
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.
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.
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.
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 theScaffold
. The ListView comprises achildren
property that takes a list of widgets as the value. - The
getItems
functions iterates through our todo list titlesList<String> _todoList
and creates aListTile
widget for each title, compiles it into a list. Following this the function returns the compiled list to theListView
.
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 parameterscontext
anditembuilder
. We pass in theBuildContext
from the build function, andAlertDialog
to the item builder parameter. itemBuilder
must return a type ofAlertDialog
and there are many variations but we will be using a simpleAlertDialog
, with a title and content parameter. For the content, I am passing in a text field with aTextEditingController
to listen to and store the values of the editable text field. I also added action widgetsCANCEL
andADD
. When we cancel wepop
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