Flutter: Xây dựng chức năng quản lý Tasks
· 3 min read
Quản lý tasks là một chức năng phổ biến trong các ứng dụng quản lý công việc, Todo List, dự án... Bài viết này hướng dẫn bạn xây dựng chức năng quản lý tasks hoàn chỉnh trong Flutter, sử dụng Provider để quản lý trạng thái và lưu trữ dữ liệu.
1. Mô hình dữ liệu Task
class Task {
final String id;
String title;
String description;
DateTime? deadline;
bool isCompleted;
Task({
required this.id,
required this.title,
this.description = '',
this.deadline,
this.isCompleted = false,
});
}
2. Provider quản lý danh sách tasks
import 'package:flutter/material.dart';
class TaskProvider with ChangeNotifier {
List<Task> _tasks = [];
List<Task> get tasks => _tasks;
void addTask(Task task) {
_tasks.add(task);
notifyListeners();
}
void updateTask(Task task) {
final index = _tasks.indexWhere((t) => t.id == task.id);
if (index != -1) {
_tasks[index] = task;
notifyListeners();
}
}
void deleteTask(String id) {
_tasks.removeWhere((t) => t.id == id);
notifyListeners();
}
void toggleComplete(String id) {
final index = _tasks.indexWhere((t) => t.id == id);
if (index != -1) {
_tasks[index].isCompleted = !_tasks[index].isCompleted;
notifyListeners();
}
}
}
3. Giao diện quản lý tasks
Hiển thị danh sách tasks
Consumer<TaskProvider>(
builder: (context, taskProvider, child) {
final tasks = taskProvider.tasks;
return ListView.builder(
itemCount: tasks.length,
itemBuilder: (context, index) {
final task = tasks[index];
return ListTile(
title: Text(task.title),
subtitle: Text(task.description),
trailing: Checkbox(
value: task.isCompleted,
onChanged: (_) => taskProvider.toggleComplete(task.id),
),
onTap: () {
// Chỉnh sửa task
},
onLongPress: () {
// Xóa task
taskProvider.deleteTask(task.id);
},
);
},
);
},
)
Thêm task mới
void _addTask(BuildContext context) {
final provider = Provider.of<TaskProvider>(context, listen: false);
final newTask = Task(
id: UniqueKey().toString(),
title: 'Task mới',
description: 'Mô tả...',
deadline: DateTime.now().add(Duration(days: 1)),
);
provider.addTask(newTask);
}
4. Lưu trữ tasks (local storage)
Bạn có thể sử dụng shared_preferences, hive hoặc sqflite để lưu trữ tasks. Ví dụ với shared_preferences:
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';
Future<void> saveTasks(List<Task> tasks) async {
final prefs = await SharedPreferences.getInstance();
final tasksJson = jsonEncode(tasks.map((t) => {
'id': t.id,
'title': t.title,
'description': t.description,
'deadline': t.deadline?.toIso8601String(),
'isCompleted': t.isCompleted,
}).toList());
await prefs.setString('tasks', tasksJson);
}
5. Hình minh họa kiến trúc quản lý tasks
6. Best Practices
- Sử dụng Provider hoặc Riverpod để quản lý state.
- Tách biệt logic và UI.
- Lưu trữ dữ liệu local hoặc cloud.
- Sử dụng UUID cho id task.
- Thêm xác nhận khi xóa task.