我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情

今天，我们将使用 Flutter 构建一个动态的 todo list 的应用。

开发完成的效果如下：

我们直接进入正题。

基础 Flutter 应用脚手架

```dart

create new project

flutter create flutter_todo_app

navigate to project

cd flutter_todo_app

run flutter

flutter run ```

我们清除文件 lib/main.dart，从头开始开发。

main.dart 这个文件是 Flutter 应用的入口文件。在这篇文章中，我将仅仅使用这个文件来开发。

首先，我们先导入 material 包。

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

下一步，我们得有一个主要的方法。在这个例子中，它将返回 TodoApp 实例。

dart void main() => runApp( new TodoApp(), );

这个 TodoApp 应该是一个 statelessWidget。这将会是我们列表的骨架

dart class TodoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Todo list', home: new TodoList(), ); } }

正如你所见，我返回了一个 MaterialApp 实例，它具有一个 title 属性和一个 home 功能。这个 home 函数返回一个 TodoList 实例。这个 TodoList 类才是我们控制的列表项。

dart class TodoList extends StatefulWidget { @override _TodoListState createState() => new _TodoListState(); }

等等，这是什么？所有的挂件都会调用一个状态去知道将要发生什么和渲染什么。在这个例子中，我们调用了 _TodoListState。这将包含应用中的列表及其运行逻辑。

```dart class _TodoListState extends State { final TextEditingController _textFieldController = TextEditingController(); final List _todos = [];

@override Widget build(BuildContext context) { // Widget template comes here }

// Other functions } ```

接下来，创建列表变量。

dart final List<Todo> _todos = <Todo>[];

也许你已经注意到了，我们定义了这个列表的类型是 Todo，但 Flutter 怎么知道 Todo 长是什么样呢？

Flutter 并不会知道，所以我们得创建一个类来定义。如下:

dart class Todo { Todo({required this.name, required this.checked}); final String name; bool checked; }

这跟 typescript 中的类型定义很像。我们告诉 flutter 一个 todo 项应该包含什么，什么字段是必须的。在我们的案例中，我们有名字和 checked 两个状态属性。

回到 _TodoListState 中，我们开始让我们的挂件展示点东西。

dart @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Todo list'), ), body: ListView( padding: EdgeInsets.symmetric(vertical: 8.0), children: _todos.map((Todo todo) { return TodoItem( todo: todo, onTodoChanged: _handleTodoChange, ); }).toList(), ), floatingActionButton: FloatingActionButton( onPressed: () => _displayDialog(), tooltip: 'Add Item', child: Icon(Icons.add)), ); }

让我们看看上面发生了什么。我们返回了应用的一个脚手架，在脚手架上，我们添加了一个包含标题的 appBar 的属性。我们定义了 body 属性，这将存放 ListView 组件。

在上面代码片段中，通过 map 方法返回每个元素的 TodoItem。

然后，在应用的底部，我们定义了一个按钮。当按钮被点击时候，将调用 _displayDialog 方法。

到目前为止，我们还需要完成下面的代码片段：

创建 TodoItem
定义一个 _displayDialog 函数
定义一个 _handleTodoChange 函数

让我们一个一个来解决。

创建 TodoItem

TodoItem 是我们列表项的单独体现。

```dart class TodoItem extends StatelessWidget { TodoItem({ required this.todo, required this.onTodoChanged, }) : super(key: ObjectKey(todo));

final Todo todo; final onTodoChanged;

TextStyle? _getTextStyle(bool checked) { if (!checked) return null;

return TextStyle(
  color: Colors.black54,
  decoration: TextDecoration.lineThrough,
);

}

@override Widget build(BuildContext context) { return ListTile( onTap: () { onTodoChanged(todo); }, leading: CircleAvatar( child: Text(todo.name[0]), ), title: Text(todo.name, style: _getTextStyle(todo.checked)), ); } } ```

正如你所见，我们传递一个 todo 和 onTodoChanged 进来。

然后我们定义了一个 TextStyle 去处理列表项是否被勾选。

然后我们使用 ListTile 挂件来展示内容和添加点击事件。

展示 Dialog 去添加列表项

点击应用的右下角的按钮，将会调起 _displayDialog 方法。

这将调起一个带有文本框的对话框。当点击确认的时候，将以文本框的内容基础添加一个新的列表项。

在 _TodoListState 中创建 _displayDialog。

dart Future<void> _displayDialog() async { return showDialog<void>( context: context, barrierDismissible: false, // user must tap button! builder: (BuildContext context) { return AlertDialog( title: const Text('Add a new todo item'), content: TextField( controller: _textFieldController, decoration: const InputDecoration(hintText: 'Type your new todo'), ), actions: <Widget>[ TextButton( child: const Text('Add'), onPressed: () { Navigator.of(context).pop(); _addTodoItem(_textFieldController.text); }, ), ], ); }, ); }

Flutter 中的 Future 表明在将来的某个时候将返回潜在的值或者错误信息。在我们的案例中，将会返回用户输入的值。

对话框中有一个动作，就是当我们点击按钮的时候，将会关闭对话框并且调用 _addTodoItem 函数。

我们看看 _addTodoItem 函数长什么样：

dart void _addTodoItem(String name) { setState(() { _todos.add(Todo(name: name, checked: false)); }); _textFieldController.clear(); }

这函数比你想象中的简单，是吧。

列表项添加状态

最后一部分是，我们应该为列表项进行标记。我们需要一个处理函数 _handleTodoChange：

dart void _handleTodoChange(Todo todo) { setState(() { todo.checked = !todo.checked; }); }

这里我们只是改变了其列表项的状态。

完整的代码如下：

```dart // lib/main.dart import 'package:flutter/material.dart';

class Todo { Todo({required this.name, required this.checked}); final String name; bool checked; }

class TodoItem extends StatelessWidget { TodoItem({ required this.todo, required this.onTodoChanged, }) : super(key: ObjectKey(todo));

final Todo todo; final onTodoChanged;

TextStyle? _getTextStyle(bool checked) { if (!checked) return null; return TextStyle( color: Colors.black54, decoration: TextDecoration.lineThrough, );

}

class TodoList extends StatefulWidget { @override _TodoListState createState() => new _TodoListState(); }

class _TodoListState extends State { final TextEditingController _textFieldController = TextEditingController(); final List _todos = [];

@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Todo list'), ), body: ListView( padding: EdgeInsets.symmetric(vertical: 8.0), children: _todos.map((Todo todo) { return TodoItem( todo: todo, onTodoChanged: _handleTodoChange, ); }).toList(), ), floatingActionButton: FloatingActionButton( onPressed: () => _displayDialog(), tooltip: 'Add Item', child: Icon(Icons.add)), ); }

void _handleTodoChange(Todo todo) { setState(() { todo.checked = !todo.checked; }); }

void _addTodoItem(String name) { setState(() { _todos.add(Todo(name: name, checked: false)); }); _textFieldController.clear(); }

Future _displayDialog() async { return showDialog( context: context, barrierDismissible: false, // user must tap button! builder: (BuildContext context) { return AlertDialog( title: const Text('Add a new todo item'), content: TextField( controller: _textFieldController, decoration: const InputDecoration(hintText: 'Type your new todo'), ), actions: [ TextButton( child: const Text('Add'), onPressed: () { Navigator.of(context).pop(); _addTodoItem(_textFieldController.text); }, ), ], ); }, ); } }

class TodoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Todo list', home: new TodoList(), ); } }

void main() => runApp(new TodoApp()); ```

本文采用的是意译的方式。原文链接 - Build a todo list app with Flutter

Flutter 构建一个 todo list 应用