---

实战项目二：开发Todo List应用

引言

在Flutter的广阔世界中，通过实际项目来巩固和深化所学知识是提升技能的有效途径。本章节将引领你完成一个经典且实用的项目——开发一个Todo List应用。Todo List应用不仅能够帮助用户管理日常任务，还因其功能相对简单、结构清晰，成为学习移动应用开发框架（如Flutter）的理想起点。通过本项目，你将掌握Flutter的基本组件使用、状态管理、数据持久化以及基本的UI设计原则。

项目概述

我们的Todo List应用将具备以下核心功能：

1. 任务添加：用户能够输入任务描述并添加到列表中。
2. 任务显示：所有添加的任务以列表形式展示，包括任务描述和完成状态。
3. 任务编辑：用户可以修改已添加的任务描述。
4. 任务删除：用户可以删除不再需要的任务。
5. 任务完成/未完成切换：用户可以通过点击任务旁的复选框来标记任务为完成或未完成。
6. 数据持久化：应用关闭后，已添加的任务数据应能被保存，并在下次启动时恢复。

环境准备

在开始之前，请确保你的开发环境已经配置好Flutter SDK，并且安装了Android Studio或VS Code等IDE，以及相应的Flutter插件。

项目结构规划

1. lib/：存放Dart代码的主要目录。

   • main.dart：应用的入口文件。
   • models/：存放数据模型的目录（如TodoItem）。
   • screens/：存放不同屏幕（页面）的目录。
   • widgets/：存放可复用组件的目录。
   • services/：存放服务逻辑（如数据持久化）的目录。

2. assets/：存放静态资源（如图片、字体）的目录。

3. pubspec.yaml：管理Flutter项目的依赖和配置。

第一步：创建项目和基本结构

1. 创建新项目：在命令行中运行flutter create todo_list_app来创建一个新的Flutter项目。

2. 添加依赖：在pubspec.yaml中添加必要的依赖，如shared_preferences用于数据持久化。

3. 创建基本目录结构：按照上述规划，在lib目录下创建相应的子目录和文件。

第二步：定义TodoItem模型

在models目录下创建todo_item.dart，定义TodoItem模型：

class TodoItem {
  String id;
  String title;
  bool isCompleted;
  TodoItem({this.id, this.title, this.isCompleted = false});
  // 省略getter和setter方法
}

第三步：实现数据持久化

在services目录下创建todo_service.dart，使用shared_preferences实现TodoItem的保存和加载：

import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';
class TodoService {
  static const String KEY_TODOS = 'todos';
  Future<List<TodoItem>> loadTodos() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String json = prefs.getString(KEY_TODOS) ?? '[]';
    return jsonDecode(json).map((e) => TodoItem.fromJson(e)).toList();
  }
  Future<void> saveTodos(List<TodoItem> todos) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String json = jsonEncode(todos.map((e) => e.toJson()).toList());
    await prefs.setString(KEY_TODOS, json);
  }
}
// 在TodoItem中添加toJson和fromJson方法

第四步：构建UI界面

1. 主屏幕（HomeScreen）：使用Scaffold布局，包含AppBar和ListView。

2. 任务项组件（TodoItemWidget）：自定义一个Widget，用于展示单个TodoItem，包括复选框、任务描述和删除按钮。

3. 添加任务界面（AddTodoScreen）：一个简单的表单界面，包含文本输入框和提交按钮。

第五步：实现业务逻辑

1. 初始化数据：在HomeScreen的initState中调用TodoService.loadTodos来加载数据。

2. 添加任务：在AddTodoScreen中，用户输入任务并提交后，将新任务添加到列表中，并调用TodoService.saveTodos保存数据。

3. 编辑任务：点击任务项进入编辑模式，修改后更新列表并保存数据。

4. 删除任务：点击删除按钮从列表中移除任务，并更新保存的数据。

5. 切换任务状态：点击复选框切换任务的完成状态，并更新UI和数据。

第六步：优化与测试

1. UI优化：调整布局和样式，确保应用在不同设备和屏幕尺寸上都能良好显示。

2. 功能测试：对每个功能进行手动测试，确保没有逻辑错误和界面问题。

3. 性能优化：检查应用的启动时间、内存使用等性能指标，并进行必要的优化。

4. 错误处理：添加必要的错误处理逻辑，如网络请求失败、数据解析错误等。

第七步：部署与发布

1. 构建APK或IPA文件：使用Flutter命令行工具构建应用的APK（Android）或IPA（iOS）文件。

2. 测试真机：在真实设备上测试应用，确保没有设备特定的问题。

3. 发布到应用商店：遵循Google Play或App Store的发布流程，将应用提交到相应的应用商店。

结语

通过本实战项目，你不仅学会了如何使用Flutter开发一个完整的Todo List应用，还掌握了Flutter开发中的许多关键技能，包括UI设计、状态管理、数据持久化以及应用发布流程。希望这个项目能成为你Flutter学习之旅中的一个重要里程碑，激励你继续深入探索这个强大的移动应用开发框架。