Lista de tareas: Tareas pendientes

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

Con solo mirar la pantalla, deberías saber cuánto queda por hacer. La respuesta es el número de tareas que no están terminadas, y puedes calcularlo a partir de la lista cada vez que se construye la pantalla.

Un getter es el lugar indicado para ello. Se lee como un campo, pero ejecuta su código cada vez que lo usas, así que siempre está actualizado:

int get _left => _tasks.where((task) => !task.done).length;

No hay ninguna variable adicional que mantener sincronizada ni ningún setState propio: marcar una tarea ya llama a setState, se vuelve a construir la pantalla y el getter vuelve a contar.

Un detalle hace que suene como si lo hubiera escrito una persona: «1 task left» y no «1 tasks left». Una condición elige las palabras adecuadas.

Desafío

Intermedio

Muestra cuántas tareas quedan:

añade un getter _left que cuente las tareas que no están completadas
entre el campo y la lista, muéstralo en un Text, como 3 tasks left, dentro de un Row con 16 píxeles de padding a los lados y 8 arriba y abajo
si queda exactamente una tarea, muestra 1 task left

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

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

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

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

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];
  final _controller = TextEditingController();

  void _addTask() {
    setState(() {
      _tasks.add(Task(_controller.text));
    });
    _controller.clear();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      labelText: 'New task',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                IconButton.filled(
                  onPressed: _addTask,
                  icon: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return ListTile(
                  leading: Checkbox(
                    value: task.done,
                    onChanged: (value) {
                      setState(() {
                        task.done = value!;
                      });
                    },
                  ),
                  title: Text(
                    task.title,
                    style: task.done
                        ? const TextStyle(
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey,
                          )
                        : null,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}