Hello everyone! Welcome back to Kodular Free AIA. This is Hifza, and today we're sharing a simple but super useful project: a To-Do List App in Kodular. You can add tasks, tap a task to mark it as done, clear the whole list, and, best of all, your tasks are still there after you close and reopen the app.
A to-do list is one of the best first projects for any Kodular beginner. It teaches you three skills you will use in almost every app you ever build: working with lists, showing data in a List View, and saving data on the phone with TinyDB. Everything in this project uses built-in Kodular components only, so there are no extensions to install and no API keys to set up. As always, the full project is available as a Free AIA at the end of this post.
What the To-Do List App Does
- Type a task into the text box and tap Add to put it on your list.
- If you tap Add with an empty box (or only spaces), the app reminds you to type a task first.
- Tap any task in the list and a dialog asks "Mark this task as done?". Choose Done to remove it or Keep to leave it.
- Tap Clear All Tasks to delete everything (with a confirmation dialog so you don't do it by accident).
- All tasks are saved with TinyDB, so they load again automatically every time the app opens.
Designer: Components Used
Here is the complete component list for Screen1 (Title: My To-Do List). The names below are exactly the ones used in the AIA, so you can follow along easily.
| Component | Name | Important properties |
|---|---|---|
| Label | TitleLabel | Text: My To-Do List, FontSize: 22, FontBold: checked, Width: Fill parent, TextAlignment: center |
| Horizontal Arrangement | InputArrangement | Width: Fill parent, AlignVertical: center |
| Text Box (inside InputArrangement) | TaskTextBox | Hint: Enter a new task, Width: Fill parent |
| Button (inside InputArrangement) | AddButton | Text: Add |
| List View | TaskListView | Width: Fill parent, Height: Fill parent |
| Button | ClearAllButton | Text: Clear All Tasks, Width: Fill parent |
| Tiny DB (non-visible) | TaskDB | Namespace: TodoApp |
| Notifier (non-visible) | TaskNotifier | Default settings |
Setting the List View height to Fill parent lets it take all the free space between the input row and the Clear All button, so the layout looks good on small and large phones.
Blocks Explained
The app has two global variables and five event blocks. Let's go through them one by one.
1. Global variables
initialize global tasks to create empty list initialize global selectedIndex to 0
tasks holds every task as a list of text items. selectedIndex remembers which task the user tapped, so we know which one to remove after they answer the dialog.
2. Load saved tasks when the app opens
when Screen1.Initialize
do set global tasks to call TaskDB.GetValue
tag = "tasks"
valueIfTagNotThere = create empty list
set TaskListView.Elements to get global tasks
GetValue reads the list we saved under the tag "tasks". The very first time the app runs, nothing is saved yet, so it returns an empty list instead. Then we show the list in the List View using its Elements property.
3. Add a new task
when AddButton.Click
do if is empty trim TaskTextBox.Text
then call TaskNotifier.ShowAlert notice = "Please type a task first"
else add items to list list = get global tasks
item = trim TaskTextBox.Text
call TaskDB.StoreValue tag = "tasks"
valueToStore = get global tasks
set TaskListView.Elements to get global tasks
set TaskTextBox.Text to ""
call TaskNotifier.ShowAlert notice = "Task added"
The trim block removes extra spaces, so a task made of only spaces is treated as empty. After adding the task we save the whole list with StoreValue, refresh the List View, and clear the text box for the next task.
4. Tap a task to mark it as done
when TaskListView.AfterPicking
do set global selectedIndex to TaskListView.SelectionIndex
call TaskNotifier.ShowChooseDialog
message = TaskListView.Selection
title = "Mark this task as done?"
button1Text = "Done"
button2Text = "Keep"
cancelable = false
SelectionIndex is the position of the tapped item (1 for the first task, 2 for the second, and so on), and Selection is its text. We store the index first, because the dialog answer arrives later in a separate event.
5. Clear all tasks
when ClearAllButton.Click
do call TaskNotifier.ShowChooseDialog
message = "This will delete every task in your list."
title = "Clear all tasks?"
button1Text = "Delete All"
button2Text = "Cancel"
cancelable = false
6. Handle the dialog answer
when TaskNotifier.AfterChoosing choice
do if get choice = "Done"
then remove list item list = get global tasks
index = get global selectedIndex
call TaskDB.StoreValue tag = "tasks"
valueToStore = get global tasks
set TaskListView.Elements to get global tasks
call TaskNotifier.ShowAlert notice = "Task completed!"
if get choice = "Delete All"
then set global tasks to create empty list
call TaskDB.StoreValue tag = "tasks"
valueToStore = get global tasks
set TaskListView.Elements to get global tasks
call TaskNotifier.ShowAlert notice = "All tasks cleared"
Both dialogs share the same Notifier, so one AfterChoosing event handles both. The choice parameter is the text of the button the user pressed, which is why each dialog uses different button texts ("Done" vs "Delete All"). If the user presses "Keep" or "Cancel", neither if matches and nothing happens.
Want to learn more about how saving works? Read our full guide: Kodular TinyDB Tutorial 2026: Save Data and Keep Users Logged In.
How to Import the AIA into Kodular
- Download TodoList.aia from the download section below.
- Open Kodular Creator and sign in.
- Go to Projects → Import project (.aia) from my computer.
- Choose the downloaded TodoList.aia file and wait for the project to open.
- Test it with the Kodular Companion app, or build an APK from the Export menu.
Common Mistakes
- Forgetting to save after every change. If you only call StoreValue when adding a task, deleted tasks will come back the next time the app opens. Save after adding, removing and clearing.
- Using a different tag for GetValue and StoreValue. The tag must be exactly the same text ("tasks") in both blocks, including upper/lower case.
- Not giving GetValue a list as the default. If "valueIfTagNotThere" is an empty text instead of create empty list, the first "add items to list" will fail with an error.
- Using the same button text in two dialogs. AfterChoosing only knows which button text was pressed, so give each dialog its own button labels.
- Reading SelectionIndex inside AfterChoosing. Store it in a global variable when the item is picked; that keeps the code clear and avoids removing the wrong task.
Ideas to Extend This App
- Add a date picker so every task has a due date.
- Use the List View's LongClick event to edit a task instead of deleting it.
- Turn on ShowFilterBar in the List View so users can search their tasks.
- Keep a second list of completed tasks and show them on another screen.
- Add a counter label that shows how many tasks are left using the length of list block.
Looking for more beginner projects? Try our Free AIA: Student Attendance App In Kodular 2026 or the classic Calculator App Kodular Full Tutorial.
Download Free AIA:
Conclusion
That's it! With just a text box, a button, a List View, TinyDB and a Notifier, you have a complete to-do list app that remembers your tasks. Once you understand this pattern (load a list, change it, save it, show it), you can build notes apps, shopping lists, expense trackers and much more.
If you get stuck or want to share how you extended the app, leave a comment below. I read every comment, and your ideas help decide what we build next on Kodular Free AIA. Happy coding!