Danh sách việc cần làm: Thêm công việc

Thuộc phần Dự án trong hành trình Flutter của Coddy. Bài học 2 trên 36.

Một danh sách việc cần làm mà bạn không thể thêm mục mới thì chỉ như một tấm áp phích. Đặt một ô nhập và nút thêm hình tròn phía trên danh sách, bên trong Row.

Ô nhập cần một TextEditingController để nút thêm có thể đọc nội dung đã nhập. Thêm mục mới gồm hai bước: đưa một Task mới vào danh sách bên trong setState để danh sách được vẽ lại, rồi xóa ô nhập để chuẩn bị cho mục tiếp theo:

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

Giờ đây, danh sách cùng hiển thị trên màn hình với ô nhập. Một ListView bên trong Column cần được bọc trong Expanded, để nó chiếm phần không gian còn lại thay vì đòi chiếm toàn bộ.

IconButton.filled là một IconButton nằm trên hình tròn có màu theo chủ đề, giống kiểu dáng của một thao tác chính trong Material 3.

Thử thách

Trung bình

Thêm nhiệm vụ từ một trường nhập:

thêm vào trạng thái một TextEditingController có tên _controller (và giải phóng nó)
đặt body thành một Column: đầu tiên là một Row có phần đệm 16 pixel, chứa một TextField Expanded với nhãn New task và một IconButton.filled có Icons.add, sau đó là danh sách bên trong một Expanded
khi nhấn nút, nhiệm vụ vừa nhập sẽ được thêm vào cuối danh sách và trường nhập sẽ được xóa

Tự làm thử

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