Lista de tareas: Añadir una tarea

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

Una lista de tareas a la que no puedes añadir nada es un póster. Coloca un campo y un botón circular para añadir encima de la lista, dentro de una Row.

El campo recibe un TextEditingController, para que el botón de añadir pueda leer lo que se escribió. Añadir consta de dos pasos: poner una nueva Task en la lista dentro de setState, para que la lista se vuelva a dibujar, y luego vaciar el campo para la siguiente tarea:

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

Ahora la lista comparte la pantalla con el campo. Un ListView dentro de una Column necesita un Expanded alrededor, para que ocupe el espacio restante en vez de pedirlo todo.

IconButton.filled es un IconButton sobre un círculo relleno del color del tema, como se ve una acción principal en Material 3.

Desafío

Intermedio

Agrega tareas desde un campo:

dale al estado un TextEditingController llamado _controller (y elimínalo)
haz que el body sea una Column: primero, una Row con 16 píxeles de relleno, que contenga un TextField Expanded etiquetado como New task y un IconButton.filled con Icons.add; después, coloca la lista dentro de un Expanded
al tocar el botón, se agrega la tarea escrita al final de la lista y se vacía el campo

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;
}

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')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
          );
        },
      ),
    );
  }
}