Skip to main content

Todo App Tutorial

⏱️ 30 minutes Build a complete task manager with adding, completing, and persisting tasks. You’ll learn about lists, forms, state management, and local data storage.

What You’ll Build

A todo app that:
  • Shows a list of tasks
  • Lets you add new tasks
  • Mark tasks as complete
  • Delete tasks
  • Saves everything locally (persists between app launches)

Part 1: Create the App

Start a New Project

On the Nativeline home page, enter this description:

Complete the Wizard

  • Who is this for? — Just me
  • Feel — Simple & clean
  • Priority — Core functionality first
  • Colors — Choose any palette
  • Name — Todo List
Wait for the initial build to complete.

Part 2: Review What You Have

Your app should have:
  • A list view (possibly empty)
  • A way to add tasks
  • Basic styling
Explore the Simulator. Try adding a task if the UI is ready.
The initial version might not be exactly what you imagined. That’s normal! We’ll refine it step by step.

Part 3: Add Task Input

If your app doesn’t have a good way to add tasks, let’s improve it:
Test it:
  1. Type a task
  2. Tap Add
  3. See it appear in the list

Part 4: Add Checkboxes

Let’s add the ability to complete tasks:
Test completing a few tasks. They should visually change to show they’re done.

Part 5: Add Delete Functionality

Now let’s add the ability to remove tasks:
Alternatively, you could ask for a delete button:
Test deleting a task.

Part 6: Make It Persistent

Right now, tasks disappear when you close the app. Let’s fix that:
Test persistence:
  1. Add a few tasks
  2. Press Cmd+Shift+H to go to home screen in Simulator
  3. Reopen the app
  4. Your tasks should still be there!

Part 7: Polish the Design

Let’s make it look professional:

Part 8: Add Task Details (Optional)

Want to go further? Add due dates:

Part 9: Add Categories (Optional)

Organize tasks with categories:

Final Result

You now have a fully functional todo app with:
  • ✅ Task creation
  • ✅ Completion with visual feedback
  • ✅ Deletion
  • ✅ Local persistence
  • ✅ Polished design
  • ✅ (Optional) Due dates
  • ✅ (Optional) Categories

What You Learned

This tutorial taught you:

Tips & Troubleshooting

Make sure you asked for SwiftData or local persistence. Try: “Save tasks using SwiftData so they persist when the app is closed”
Some implementations might not have swipe. You can ask: “Use the standard iOS swipe-to-delete gesture on the list”
Ask for more spacing: “Add 16pt padding around the list and 12pt spacing between tasks”
Add editing functionality: “Let me tap a task to edit its title in a sheet”

Challenge: Extend Your App

Try adding these features on your own:
  1. Search — Add a search bar to filter tasks
  2. Priority levels — High, Medium, Low with colors
  3. Sorting — Sort by date, priority, or alphabetically
  4. Statistics — Show how many tasks you’ve completed this week
  5. Themes — Let users choose between light and dark mode

Next Tutorial

Weather App

Learn to work with APIs and location

Photo Gallery

Learn to use camera and photo library