三十、Flutter实战之TODO应用
在本篇文章中，我们将构建一个TODO应用，使用最新的Dart语法和Flutter框架。这个TODO应用将具备添加、编辑、删除任务，以及任务的状态管理等功能。让我们一步一步地构建这个TODO应用。
步骤 1：创建Flutter项目
首先，我们需要创建一个Flutter项目。打开终端并执行以下命令：
flutter create todo_app cd todo_app
这将创建一个名为todo_app的Flutter项目，并进入项目目录。
步骤 2：创建模型类
我们将创建一个模型类Todo来表示任务，包含任务的标题、描述和完成状态。在lib/models/todo.dart中创建一个新的Dart文件，并添加以下代码：
class Todo { String title; String description; bool isCompleted; Todo({ required this.title, required this.description, this.isCompleted = false, });}
步骤 3：创建任务列表页面
我们将创建一个任务列表页面，显示所有的任务，并提供添加、编辑、删除任务的功能。在lib/screens/todo_list_screen.dart中创建一个新的Dart文件，并添加以下代码：
import 'package:flutter/material.dart';import 'package:todo_app/models/todo.dart';import 'package:todo_app/screens/todo_edit_screen.dart'; class TodoListScreen extends StatefulWidget { @override _TodoListScreenState createState() => _TodoListScreenState();} class _TodoListScreenState extends State { List _todos = []; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TODO List'), ), body: ListView.builder( itemCount: _todos.length, itemBuilder: (context, index) { final todo = _todos[index]; return ListTile( title: Text(todo.title), subtitle: Text(todo.description), trailing: Checkbox( value: todo.isCompleted, onChanged: (value) { setState(() { todo.isCompleted = value!; }); }, ), onTap: () { _navigateToEditScreen(todo); }, ); }, ), floatingActionButton: FloatingActionButton( onPressed: () { _navigateToEditScreen(null); }, child: Icon(Icons.add), ), ); } void _navigateToEditScreen(Todo? todo) async { final editedTodo = await Navigator.push( context, MaterialPageRoute( builder: (context) => TodoEditScreen(todo: todo), ), ); if (editedTodo != null) { setState(() { if (todo == null) { _todos.add(editedTodo); } else { final index = _todos.indexOf(todo); _todos[index] = editedTodo; } }); } }}
在这段代码中，我们创建了一个TodoListScreen类作为任务列表页面，它是一个有状态的小部件。在build方法中，我们使用Scaffold和ListView.builder来显示所有的任务，并为每个任务提供了标题、描述和完成状态的展示。
我们还实现了_navigateToEditScreen方法，用于导航到任务编辑页面。当用户点击某个任务时，会跳转到任务编辑页面并将对应的任务传递过去。
带你读《深入浅出Dart》三十、Flutter实战之TODO应用（2）https://developer.aliyun.com/article/1348582?groupCode=tech_library
