Lista de tarefas: A lista de tarefas

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

Esta seção apresenta quatro aplicativos, construídos um recurso de cada vez. Você já conhece cada parte; agora vai juntá-las da maneira como aplicativos reais são feitos.

O primeiro aplicativo é uma lista de tarefas. Ao final deste capítulo, você poderá adicionar tarefas, marcá-las como concluídas, dispensá-las com um gesto de deslizar, desfazer uma exclusão e filtrar o que vê.

Todo aplicativo começa com seus dados. Por enquanto, uma tarefa é um título, então uma classe simples o armazena, e a tela mantém uma lista de tarefas em seu State:

class Task {
  Task(this.title);

  final String title;
}

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

Um ListView.builder transforma essa lista em linhas na tela. Ele chama itemBuilder uma vez para cada índice até itemCount, e cada chamada retorna um ListTile.

Desafio

Fácil

Exiba as tarefas:

escreva uma classe Task com um final String title e um construtor Task(this.title)
em _TodoScreenState, crie uma lista _tasks com três tarefas: Buy milk, Walk the dog e Read a book
substitua o Center em body: por um ListView.builder que exiba o título de cada tarefa em um ListTile

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

// Escreva a classe Task aqui.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Crie a lista de tarefas aqui.

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