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

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

Phần này gồm bốn ứng dụng, được xây dựng từng tính năng một. Bạn đã biết mọi phần rồi, giờ bạn kết hợp chúng theo cách các ứng dụng thực tế được tạo ra.

Ứng dụng đầu tiên là danh sách việc cần làm. Đến cuối chương này, bạn có thể thêm việc cần làm, đánh dấu chúng là đã hoàn thành, vuốt để xóa, hoàn tác thao tác xóa và lọc những gì bạn thấy.

Mọi ứng dụng đều bắt đầu từ dữ liệu. Hiện tại, một việc cần làm chỉ là một tiêu đề, vì vậy một lớp nhỏ lưu giữ tiêu đề đó, còn màn hình giữ một danh sách việc cần làm trong State:

class Task {
  Task(this.title);

  final String title;
}

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

ListView.builder biến danh sách đó thành các hàng trên màn hình. Nó gọi itemBuilder một lần cho mỗi chỉ số cho đến itemCount, và mỗi lần gọi trả về một ListTile.

Thử thách

Dễ

Hiển thị các việc cần làm:

viết lớp Task với final String title và hàm khởi tạo Task(this.title)
trong _TodoScreenState, tạo danh sách _tasks gồm ba việc cần làm: Buy milk, Walk the dog và Read a book
thay Center trong body: bằng ListView.builder để hiển thị tiêu đề của từng việc cần làm trong một ListTile

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

// Viết lớp (class) Task ở đây.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Tạo danh sách (list) các tác vụ ở đây.

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