现代JavaScript高级小册
深入浅出Dart
现代TypeScript高级小册
Flutter实战之TODO应用
在本篇文章中，我们将构建一个TODO应用，使用最新的Dart语法和Flutter框架。这个TODO应用将具备添加、编辑、删除任务，以及任务的状态管理等功能。让我们一步一步地构建这个TODO应用。
步骤 1：创建Flutter项目
首先，我们需要创建一个Flutter项目。打开终端并执行以下命令：
代码语言：javascript复制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<TodoListScreen> {
List<Todo> _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来显示所有的任务，并为每个任务提供了标题、描述和完成状态的展示。
我们还实现了`_navigateToEdit
Screen`方法，用于导航到任务编辑页面。当用户点击某个任务时，会跳转到任务编辑页面并将对应的任务传递过去。
步骤 4：创建任务编辑页面
我们将创建一个任务编辑页面，用于添加新任务或编辑现有任务的标题、描述和完成状态。在lib/screens/todo_edit_screen.dart中创建一个新的Dart文件，并添加以下代码：
import 'package:flutter/material.dart';
import 'package:todo_app/models/todo.dart';
class TodoEditScreen extends StatefulWidget {
final Todo? todo;
TodoEditScreen({this.todo});
@override
_TodoEditScreenState createState() => _TodoEditScreenState();
}
class _TodoEditScreenState extends State<TodoEditScreen> {
late TextEditingController _titleController;
late TextEditingController _descriptionController;
bool _isCompleted = false;
@override
void initState() {
super.initState();
_titleController = TextEditingController(text: widget.todo?.title ?? '');
_descriptionController =
TextEditingController(text: widget.todo?.description ?? '');
_isCompleted = widget.todo?.isCompleted ?? false;
}
@override
void dispose() {
_titleController.dispose();
_descriptionController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.todo == null ? 'Add Todo' : 'Edit Todo'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _titleController,
decoration: InputDecoration(
labelText: 'Title',
),
),
SizedBox(height: 16.0),
TextField(
controller: _descriptionController,
decoration: InputDecoration(
labelText: 'Description',
),
),
SizedBox(height: 16.0),
CheckboxListTile(
title: Text('Completed'),
value: _isCompleted,
onChanged: (value) {
setState(() {
_isCompleted = value!;
});
},
),
SizedBox(height: 16.0),
RaisedButton(
onPressed: () {
_saveTodo();
},
child: Text('Save'),
),
],
),
),
);
}
void _saveTodo() {
final newTodo = Todo(
title: _titleController.text,
description: _descriptionController.text,
isCompleted: _isCompleted,
);
Navigator.pop(context, newTodo);
}
}在这段代码中，我们创建了一个TodoEditScreen类作为任务编辑页面，它也是一个有状态的小部件。在initState方法中，我们初始化了文本编辑器的控制器，并根据传入的任务初始化了相应的值。
在build方法中，我们使用Scaffold和Column来显示标题、描述和完成状态的输入字段。用户可以在这个页面上输入任务的详细信息，并使用保存按钮将其保存。
步骤 5：运行应用
现在，我们已经完成了强大的TODO应用的代码编写。在终端中，运行以下命令来启动应用程序：
代码语言：javascript复制flutter runFlutter将在模拟器或设备上运行应用程序，并显示任务列表界面。您可以点击浮动按钮添加新的
任务，点击任务列表项编辑任务的标题、描述和完成状态。
参考资料
- Dart官方文档
- Flutter官方文档
- Flutter实战教程
