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

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

Список дел, в который нельзя добавлять задачи, — это плакат. Размести над списком поле и круглую кнопку добавления в Row.

Полю нужен TextEditingController, чтобы кнопка добавления могла прочитать введённый текст. Добавление состоит из двух шагов: помести новую Task в список внутри setState, чтобы список отрисовался заново, а затем очисти поле для следующей задачи:

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

Теперь список делит экран с полем. Для ListView внутри Column нужна обёртка Expanded, чтобы список занимал оставшееся пространство, а не запрашивал его целиком.

IconButton.filled — это IconButton на заполненном круге цвета темы; так в Material 3 выглядит основное действие.

Задание

Средне

Добавляй задачи из поля ввода:

добавь в состояние TextEditingController с именем _controller (и освободи его)
сделай body столбцом Column: сначала размести Row с отступами в 16 пикселей, содержащий Expanded с TextField, помеченным New task, и IconButton.filled с Icons.add, затем помести список внутрь Expanded
при нажатии кнопки добавляй введённую задачу в конец списка и очищай поле

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

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