Hướng Nghiệp Dữ Liệu
Group Zalo Tư Vấn
← Quay lại danh sách bài viết
Todo List App

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

Ngày đăng: 20/05/2024 | Tác giả: Tiger STEAM

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:

todo_app/
├── lib/
│   ├── main.dart
│   ├── models/
│   │   └── todo.dart
│   ├── screens/
│   │   └── home_screen.dart
│   ├── widgets/
│   │   ├── todo_item.dart
│   │   ├── todo_list.dart
│   │   └── todo_form.dart
│   └── services/
│       └── storage_service.dart
├── pubspec.yaml
└── test/
    └── widget_test.dart

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

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

flutter create todo_app
cd todo_app

Sau đó, mở file pubspec.yaml và thêm các dependency cần thiết:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  shared_preferences: ^2.0.15  # Để lưu trữ dữ liệu cục bộ
  provider: ^6.0.3  # Để quản lý trạng thái
  uuid: ^3.0.6  # Để tạo ID duy nhất

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

flutter pub get

Bước 2: Tạo model Todo

Tạo file lib/models/todo.dart để định nghĩa model Todo:

import 'package:uuid/uuid.dart';

class Todo {
  final String id;
  final String text;
  bool completed;

  Todo({
    String? id,
    required this.text,
    this.completed = false,
  }) : id = id ?? const Uuid().v4();

  // Chuyển đổi Todo thành Map để lưu trữ
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'text': text,
      'completed': completed,
    };
  }

  // Tạo Todo từ Map
  factory Todo.fromMap(Map<String, dynamic> map) {
    return Todo(
      id: map['id'],
      text: map['text'],
      completed: map['completed'],
    );
  }

  // Tạo bản sao của Todo với các thuộc tính đã được cập nhật
  Todo copyWith({
    String? id,
    String? text,
    bool? completed,
  }) {
    return Todo(
      id: id ?? this.id,
      text: text ?? this.text,
      completed: completed ?? this.completed,
    );
  }
}

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:

import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
import '../models/todo.dart';

class StorageService {
  static const String _key = 'todos';

  // Lưu danh sách Todo vào SharedPreferences
  Future<void> saveTodos(List<Todo> todos) async {
    final prefs = await SharedPreferences.getInstance();
    final String todosJson = jsonEncode(
      todos.map((todo) => todo.toMap()).toList(),
    );
    await prefs.setString(_key, todosJson);
  }

  // Tải danh sách Todo từ SharedPreferences
  Future<List<Todo>> loadTodos() async {
    final prefs = await SharedPreferences.getInstance();
    final String? todosJson = prefs.getString(_key);
    
    if (todosJson == null) {
      return [];
    }
    
    final List<dynamic> todosList = jsonDecode(todosJson);
    return todosList.map((item) => Todo.fromMap(item)).toList();
  }
}

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

Tạo file lib/widgets/todo_item.dart để hiển thị một nhiệm vụ:

import 'package:flutter/material.dart';
import '../models/todo.dart';

class TodoItem extends StatelessWidget {
  final Todo todo;
  final Function(String) onToggle;
  final Function(String) onDelete;

  const TodoItem({
    Key? key,
    required this.todo,
    required this.onToggle,
    required this.onDelete,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: Key(todo.id),
      background: Container(
        color: Colors.red,
        alignment: Alignment.centerRight,
        padding: const EdgeInsets.only(right: 20),
        child: const Icon(
          Icons.delete,
          color: Colors.white,
        ),
      ),
      direction: DismissDirection.endToStart,
      onDismissed: (_) => onDelete(todo.id),
      child: ListTile(
        leading: Checkbox(
          value: todo.completed,
          onChanged: (_) => onToggle(todo.id),
          activeColor: Colors.blue,
        ),
        title: Text(
          todo.text,
          style: TextStyle(
            decoration: todo.completed ? TextDecoration.lineThrough : null,
            color: todo.completed ? Colors.grey : Colors.black,
          ),
        ),
        trailing: IconButton(
          icon: const Icon(Icons.delete, color: Colors.red),
          onPressed: () => onDelete(todo.id),
        ),
      ),
    );
  }
}

Tạo file lib/widgets/todo_form.dart để thêm nhiệm vụ mới:

import 'package:flutter/material.dart';

class TodoForm extends StatefulWidget {
  final Function(String) onSubmit;

  const TodoForm({Key? key, required this.onSubmit}) : super(key: key);

  @override
  _TodoFormState createState() => _TodoFormState();
}

class _TodoFormState extends State<TodoForm> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _submit() {
    final text = _controller.text.trim();
    if (text.isNotEmpty) {
      widget.onSubmit(text);
      _controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              controller: _controller,
              decoration: const InputDecoration(
                hintText: 'Thêm nhiệm vụ mới...',
                border: OutlineInputBorder(),
              ),
              onSubmitted: (_) => _submit(),
            ),
          ),
          const SizedBox(width: 8),
          ElevatedButton(
            onPressed: _submit,
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.all(16),
              backgroundColor: Colors.blue,
            ),
            child: const Icon(Icons.add, color: Colors.white),
          ),
        ],
      ),
    );
  }
}

Tạo file lib/widgets/todo_list.dart để hiển thị danh sách nhiệm vụ:

import 'package:flutter/material.dart';
import '../models/todo.dart';
import 'todo_item.dart';

class TodoList extends StatelessWidget {
  final List<Todo> todos;
  final Function(String) onToggle;
  final Function(String) onDelete;

  const TodoList({
    Key? key,
    required this.todos,
    required this.onToggle,
    required this.onDelete,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (todos.isEmpty) {
      return const Center(
        child: Text(
          'Không có nhiệm vụ nào',
          style: TextStyle(fontSize: 18, color: Colors.grey),
        ),
      );
    }

    return ListView.separated(
      itemCount: todos.length,
      separatorBuilder: (_, __) => const Divider(height: 1),
      itemBuilder: (context, index) {
        final todo = todos[index];
        return TodoItem(
          todo: todo,
          onToggle: onToggle,
          onDelete: onDelete,
        );
      },
    );
  }
}

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:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/todo.dart';
import '../services/storage_service.dart';
import '../widgets/todo_form.dart';
import '../widgets/todo_list.dart';

enum FilterType { all, active, completed }

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final StorageService _storageService = StorageService();
  List<Todo> _todos = [];
  FilterType _currentFilter = FilterType.all;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadTodos();
  }

  Future<void> _loadTodos() async {
    final todos = await _storageService.loadTodos();
    setState(() {
      _todos = todos;
      _isLoading = false;
    });
  }

  Future<void> _saveTodos() async {
    await _storageService.saveTodos(_todos);
  }

  void _addTodo(String text) {
    setState(() {
      _todos.add(Todo(text: text));
    });
    _saveTodos();
  }

  void _toggleTodo(String id) {
    setState(() {
      _todos = _todos.map((todo) {
        if (todo.id == id) {
          return todo.copyWith(completed: !todo.completed);
        }
        return todo;
      }).toList();
    });
    _saveTodos();
  }

  void _deleteTodo(String id) {
    setState(() {
      _todos.removeWhere((todo) => todo.id == id);
    });
    _saveTodos();
  }

  void _clearCompleted() {
    setState(() {
      _todos.removeWhere((todo) => todo.completed);
    });
    _saveTodos();
  }

  List<Todo> get _filteredTodos {
    switch (_currentFilter) {
      case FilterType.all:
        return _todos;
      case FilterType.active:
        return _todos.where((todo) => !todo.completed).toList();
      case FilterType.completed:
        return _todos.where((todo) => todo.completed).toList();
    }
  }

  int get _activeCount => _todos.where((todo) => !todo.completed).length;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Todo List'),
        backgroundColor: Colors.blue,
      ),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : Column(
              children: [
                TodoForm(onSubmit: _addTodo),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '$_activeCount nhiệm vụ còn lại',
                        style: const TextStyle(color: Colors.grey),
                      ),
                      TextButton(
                        onPressed: _clearCompleted,
                        child: const Text('Xóa đã hoàn thành'),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      _filterButton(FilterType.all, 'Tất cả'),
                      const SizedBox(width: 8),
                      _filterButton(FilterType.active, 'Đang làm'),
                      const SizedBox(width: 8),
                      _filterButton(FilterType.completed, 'Hoàn thành'),
                    ],
                  ),
                ),
                const Divider(),
                Expanded(
                  child: TodoList(
                    todos: _filteredTodos,
                    onToggle: _toggleTodo,
                    onDelete: _deleteTodo,
                  ),
                ),
              ],
            ),
    );
  }

  Widget _filterButton(FilterType type, String text) {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          _currentFilter = type;
        });
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: _currentFilter == type ? Colors.blue : Colors.grey[300],
        foregroundColor: _currentFilter == type ? Colors.white : Colors.black,
      ),
      child: Text(text),
    );
  }
}

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:

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Todo App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const HomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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.

Bài viết liên quan