To-do List: The Task List

Part of the Projects section of Coddy's Flutter journey. Lesson 1 of 36.

This section is four apps, built one feature at a time. You know every piece already; now you put them together the way real apps are made.

The first app is a to-do list. By the end of this chapter you can add tasks, tick them done, swipe them away, undo a delete and filter what you see.

Every app starts with its data. A task is a title for now, so a small class holds it, and the screen keeps a list of tasks in its State:

class Task {
  Task(this.title);

  final String title;
}

final List<Task> _tasks = [Task('Buy milk')];

A ListView.builder turns that list into rows on the screen. It calls itemBuilder once for each index up to itemCount, and each call returns one ListTile.

Challenge

Easy

Show the tasks:

write a Task class with a final String title and a constructor Task(this.title)
in _TodoScreenState, make a list _tasks of three tasks: Buy milk, Walk the dog and Read a book
replace the Center in body: with a ListView.builder that shows each task's title in a ListTile

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

// Write the Task class here.

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // Make the list of tasks here.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: const Center(
        child: Text('Your tasks go here'),
      ),
    );
  }
}