Lista de tarefas: Adicione uma tarefa

Parte da seção Projetos do Journey de Flutter da Coddy. Lição 2 de 36.

Uma lista de tarefas à qual você não pode adicionar nada é um pôster. Coloque um campo e um botão redondo de adicionar acima da lista, em uma Row.

O campo recebe um TextEditingController, para que o botão de adicionar possa ler o que foi digitado. Adicionar tem duas etapas: coloque uma nova Task na lista dentro de setState, para que a lista seja desenhada novamente, e depois limpe o campo para a próxima tarefa:

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

Agora, a lista divide a tela com o campo. Uma ListView dentro de uma Column precisa de um Expanded ao redor dela, para ocupar o espaço que sobra em vez de tentar ocupar todo o espaço.

IconButton.filled é um IconButton em um círculo preenchido com a cor do tema, como é a aparência de uma ação principal no Material 3.

Desafio

Médio

Adicione tarefas a partir de um campo:

adicione ao estado um TextEditingController chamado _controller (e descarte-o)
transforme o body em uma Column: primeiro, uma Row com preenchimento de 16 pixels, contendo um TextField Expanded rotulado como New task e um IconButton.filled com Icons.add; depois, a lista dentro de um Expanded
ao tocar no botão, a tarefa digitada é adicionada ao final da lista e o campo é esvaziado

Experimente você mesmo

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