Список дел: список задач

Часть раздела Проекты путешествия по Flutter на Coddy. Урок 1 из 36.

Этот раздел посвящён четырём приложениям, которые создаются по одному компоненту за раз. Ты уже знаешь каждую часть; теперь ты соберёшь их вместе так, как создаются настоящие приложения.

Первое приложение — список дел. К концу этой главы ты сможешь добавлять задачи, отмечать их как выполненные, удалять их свайпом, отменять удаление и фильтровать отображаемые задачи.

Каждое приложение начинается с данных. Пока задача — это только заголовок, поэтому для неё создаётся небольшой класс, а экран хранит список задач в своём State:

class Task {
  Task(this.title);

  final String title;
}

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

ListView.builder превращает этот список в строки на экране. Он вызывает itemBuilder для каждого индекса вплоть до itemCount, и каждый вызов возвращает один ListTile.

Задание

Легко

Отобрази задачи:

напиши класс Task с полем final String title и конструктором Task(this.title)
в _TodoScreenState создай список _tasks из трёх задач: Buy milk, Walk the dog и Read a book
замени Center в body: на ListView.builder, который отображает название каждой задачи в ListTile

Попробуйте сами

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

// Напишите здесь класс Task.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Создайте здесь список задач.

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