Xây dựng ứng dụng Todo List với Flutter

Giới thiệu

Một ứng dụng Todo List là một trong những dự án cơ bản và thiết thực nhất mà bất kỳ lập trình viên nào cũng nên thử làm khi học một ngôn ngữ hoặc framework mới. Trong bài viết này, chúng ta sẽ đi qua các bước để xây dựng một ứng dụng Todo List đơn giản nhưng đầy đủ chức năng bằng Flutter.

Tại sao nên làm dự án Todo List với Flutter?

Dự án Todo List có vẻ đơn giản, nhưng nó bao gồm nhiều khái niệm quan trọng trong lập trình Flutter:

• CRUD operations (Create, Read, Update, Delete): Thêm, hiển thị, cập nhật và xóa các nhiệm vụ
• State management: Quản lý trạng thái ứng dụng
• Widget building: Xây dựng giao diện người dùng với các widget
• Local storage: Lưu trữ dữ liệu trên thiết bị của người dùng
• Form handling: Xử lý nhập liệu từ người dùng

Những kỹ năng này là nền tảng cho bất kỳ ứng dụng Flutter nào, từ đơn giản đến phức tạp.

Các tính năng của ứng dụng

Ứng dụng Todo List chúng ta sẽ xây dựng có các tính năng sau:

1. Thêm nhiệm vụ mới
2. Đánh dấu nhiệm vụ đã hoàn thành
3. Xóa một nhiệm vụ
4. Lọc nhiệm vụ (tất cả, đã hoàn thành, chưa hoàn thành)
5. Lưu nhiệm vụ vào local storage để không bị mất khi khởi động lại ứng dụng
6. Đếm số nhiệm vụ còn lại
7. Xóa tất cả nhiệm vụ đã hoàn thành

Cấu trúc dự án

Trước khi bắt đầu viết mã, hãy thiết lập cấu trúc dự án của chúng ta:

[object Object]

Bước 1: Thiết lập dự án Flutter

Đầu tiên, hãy tạo một dự án Flutter mới:

[object Object]

Sau đó, mở file

pubspec.yaml

và thêm các dependency cần thiết:

[object Object]

Chạy lệnh sau để cài đặt các dependency:

[object Object]

Bước 2: Tạo model Todo

Tạo file

lib/models/todo.dart

để định nghĩa model Todo:

[object Object]

Bước 3: Tạo service lưu trữ

Tạo file

lib/services/storage_service.dart

để xử lý việc lưu trữ và tải dữ liệu:

[object Object]

Bước 4: Tạo các widget

Tạo file

lib/widgets/todo_item.dart

để hiển thị một nhiệm vụ:

[object Object]

Tạo file

lib/widgets/todo_form.dart

để thêm nhiệm vụ mới:

[object Object]

Tạo file

lib/widgets/todo_list.dart

để hiển thị danh sách nhiệm vụ:

[object Object]

Bước 5: Tạo màn hình chính

Tạo file

lib/screens/home_screen.dart

để hiển thị màn hình chính của ứng dụng:

[object Object]

Bước 6: Hoàn thiện ứng dụng

Cuối cùng, cập nhật file

lib/main.dart

để khởi chạy ứng dụng:

[object Object]

Giải thích mã

Hãy xem xét một số phần quan trọng trong mã:

Model Todo

Class

Todo

đại diện cho một nhiệm vụ với các thuộc tính:

• id : Định danh duy nhất được tạo bằng UUID
• text : Nội dung nhiệm vụ
• completed : Trạng thái hoàn thành

Chúng ta cũng định nghĩa các phương thức để chuyển đổi giữa

Todo

và

Map

để lưu trữ và tải dữ liệu.

Lưu trữ cục bộ

Class

StorageService

sử dụng

SharedPreferences

để lưu trữ và tải danh sách nhiệm vụ. Dữ liệu được chuyển đổi thành JSON để lưu trữ và phân tích khi tải.

Quản lý trạng thái

Trong

HomeScreen

, chúng ta quản lý trạng thái của ứng dụng bằng

setState

. Các hàm như

_addTodo

,

_toggleTodo

, và

_deleteTodo

cập nhật trạng thái và lưu dữ liệu.

Giao diện người dùng

Giao diện người dùng được xây dựng từ các widget như

TodoForm

,

TodoList

, và

TodoItem

. Chúng ta sử dụng

ListView.separated

để hiển thị danh sách nhiệm vụ và

Dismissible

để cho phép người dùng vuốt để xóa nhiệm vụ.

Kết quả cuối cùng

Sau khi hoàn thành các bước trên, chúng ta sẽ có một ứng dụng Todo List đầy đủ chức năng với giao diện đẹp mắt. Ứng dụng này:

• Cho phép người dùng thêm, hoàn thành và xóa nhiệm vụ
• Lưu trữ nhiệm vụ của người dùng giữa các lần khởi động ứng dụng
• Lọc nhiệm vụ theo trạng thái
• Hiển thị số lượng nhiệm vụ còn lại
• Cho phép xóa tất cả các nhiệm vụ đã hoàn thành

Mở rộng dự án

Đây chỉ là phiên bản cơ bản của ứng dụng Todo List. Bạn có thể mở rộng nó với các tính năng như:

1. Chỉnh sửa nhiệm vụ: Cho phép người dùng chỉnh sửa nội dung nhiệm vụ
2. Kéo và thả: Cho phép người dùng sắp xếp lại các nhiệm vụ
3. Thêm ngày đến hạn: Cho phép người dùng thiết lập hạn chót cho các nhiệm vụ
4. Danh mục: Phân loại nhiệm vụ thành các danh mục khác nhau
5. Thông báo: Gửi thông báo khi đến hạn thực hiện nhiệm vụ
6. Đồng bộ hóa: Đồng bộ nhiệm vụ giữa các thiết bị bằng cách sử dụng Firebase hoặc dịch vụ đám mây khác

Kết luận

Dự án Todo List với Flutter có vẻ đơn giản nhưng mang lại rất nhiều giá trị học tập. Nó bao gồm các khái niệm cơ bản về Flutter và có thể được sử dụng như là nền tảng để xây dựng các ứng dụng phức tạp hơn.

Việc xây dựng dự án này từ đầu đến cuối giúp bạn hiểu rõ hơn về widget, state management, lưu trữ cục bộ và các khái niệm Flutter quan trọng khác. Đây là một dự án tuyệt vời để thực hành và nâng cao kỹ năng phát triển ứng dụng di động của bạn.

Bạn đã thử xây dựng ứng dụng Todo List của riêng mình chưa? Hãy chia sẻ trải nghiệm và các tính năng thú vị bạn đã thêm vào dự án của mình trong phần bình luận bên dưới!

Chú thích: Mã nguồn trong bài viết này được viết cho Flutter 3.0 trở lên. Nếu bạn đang sử dụng phiên bản cũ hơn, có thể cần điều chỉnh một số phần.

Đọc thêm: Các dự án có thể sử dụng Flutter

---

Học Flutter bài bản theo lộ trình

Nếu bạn muốn học có người sửa bài thay vì tự ghép tài liệu, Flutter Hướng Nghiệp đào tạo theo 3 cấp:

• Flutter Cơ Bản — Dart, widget, giao diện, 28 buổi.
• Flutter Nâng cao — state management, REST API, Firebase, 28 buổi.
• Flutter Chuyên Sâu — back-end, AI/ML, publish lên store, 53 buổi.

Lớp online trực tiếp qua Zoom/Google Meet, có bản ghi lại — không bắt buộc đến cơ sở.
Xem lịch khai giảng hoặc so sánh 5 cách học lập trình mobile nếu còn phân vân.