当前位置：首页 > news >正文

每天一个Flutter开发小项目 (2) : 构建实用的待办事项列表应用

news 来源：原创 2025/6/8 7:08:15

引言

欢迎回到 每天一个Flutter开发小项目 系列博客！在上一篇博客中，我们一起构建了简单的计数器应用，初步体验了 Flutter 的魅力。今天，我们将更进一步，构建一个日常生活中非常实用的应用——待办事项列表。

随着生活节奏的加快，待办事项列表应用成为了我们管理时间和提高效率的得力助手。它不仅能帮助我们清晰地记录需要完成的任务，还能提醒我们按时完成，避免遗漏重要事项。而 Flutter 以其卓越的跨平台能力、高效的开发效率和精美的用户界面，使得开发待办事项列表应用变得更加轻松愉快。

通过本篇博客，您将学习到：

Flutter 列表组件的使用: 掌握 ListView 组件，实现动态列表的展示。
用户输入处理: 学习如何使用 TextField 组件接收用户输入，并处理输入内容。
数据持久化: 了解如何使用 shared_preferences 或其他简单方式，将待办事项数据持久化存储，保证应用重启后数据不丢失。
状态管理进阶: 进一步理解 setState 的使用，以及如何在更复杂的 UI 结构中管理状态。
用户交互设计: 学习如何设计简洁直观的用户界面，提升用户体验。

项目简介：待办事项列表应用

我们的待办事项列表应用功能将围绕以下核心需求展开：

添加待办事项: 用户可以输入新的待办事项并添加到列表中。
查看待办事项: 清晰地展示所有待办事项，方便用户查看。
标记完成状态: 用户可以标记已完成的待办事项，区分完成和未完成任务。
(可选) 删除待办事项: 用户可以删除不再需要的待办事项。

这个项目相较于计数器应用，功能上更为丰富，涉及到的 Flutter 组件和技术也更加深入。通过构建这个应用，您将更全面地掌握 Flutter 开发的核心技能，并为后续更复杂应用的开发打下坚实基础。

实战步骤：一步步构建待办事项列表应用

接下来，让我们开始一步步构建我们的第二个 Flutter 应用 - 待办事项列表应用。

步骤 1：创建新的 Flutter 项目

与之前一样，首先确保您已安装 Flutter 开发环境。打开终端或命令提示符，运行以下命令创建一个新的 Flutter 项目，我们命名为 flutter_todo_app:

flutter create flutter_todo_app
cd flutter_todo_app

步骤 2：构建基本的 UI 结构

打开项目中的 lib/main.dart 文件，修改 MyHomePage Widget 来构建待办事项列表应用的界面。我们将使用 Scaffold 提供基本结构，包含 AppBar、Body 和 FloatingActionButton。Body 部分将使用 Column 垂直排列组件，包含一个用于添加新事项的 TextField 和一个显示待办事项列表的 ListView。

修改 MyHomePage 的 build 方法如下:

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(
      title: 'Flutter ToDo App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '待办事项列表'),
    );
  }
}

class MyHomePage extends StatefulWidget {
   
  const MyHomePage({
   super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {