Lista de tareas: La lista de tareas

Parte de la sección Proyectos del Journey de Flutter de Coddy. Lección 1 de 36.

Esta sección consta de cuatro aplicaciones, que se construyen incorporando una función a la vez. Ya conoces cada parte; ahora las unes de la manera en que se crean las aplicaciones reales.

La primera aplicación es una lista de tareas pendientes. Al final de este capítulo podrás añadir tareas, marcarlas como terminadas, deslizarlas para quitarlas, deshacer una eliminación y filtrar lo que ves.

Toda aplicación empieza con sus datos. Por ahora, una tarea es un título, así que una clase pequeña lo contiene, y la pantalla mantiene una lista de tareas en su State:

class Task {
  Task(this.title);

  final String title;
}

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

Un ListView.builder convierte esa lista en filas en la pantalla. Llama a itemBuilder una vez por cada índice hasta itemCount, y cada llamada devuelve un ListTile.

Desafío

Fácil

Muestra las tareas:

escribe una clase Task con un final String title y un constructor Task(this.title)
en _TodoScreenState, crea una lista _tasks con tres tareas: Buy milk, Walk the dog y Read a book
reemplaza el Center en body: por un ListView.builder que muestre el título de cada tarea en un ListTile

Pruébalo tú mismo

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(),
    );
  }
}

// Escribe la clase Task aquí.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Crea la lista de tareas aquí.

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