Flutter任务管理插件flutter_checklist的使用

flutter_checklist 是一个用于在 Flutter 应用中管理任务的插件。它可以帮助你轻松地创建、管理和显示任务列表。以下是如何使用 flutter_checklist 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_checklist 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_checklist: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_checklist 包：

import 'package:flutter_checklist/flutter_checklist.dart';

3. 使用 Checklist 小部件

flutter_checklist 提供了一个 Checklist 小部件，你可以直接在应用中使用它来显示和管理任务列表。

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Task> _tasks = [
    Task(title: 'Task 1', isCompleted: false),
    Task(title: 'Task 2', isCompleted: true),
    Task(title: 'Task 3', isCompleted: false),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Task Manager'),
      ),
      body: Checklist(
        tasks: _tasks,
        onTaskChanged: (Task task, bool isChecked) {
          setState(() {
            task.isCompleted = isChecked;
          });
        },
        onTaskDeleted: (Task task) {
          setState(() {
            _tasks.remove(task);
          });
        },
      ),
    );
  }
}

4. 自定义任务项

你可以通过传递 taskBuilder 参数来自定义任务项的显示方式：

Checklist(
  tasks: _tasks,
  taskBuilder: (BuildContext context, Task task, Function(bool) onChanged, Function() onDeleted) {
    return ListTile(
      title: Text(task.title),
      leading: Checkbox(
        value: task.isCompleted,
        onChanged: onChanged,
      ),
      trailing: IconButton(
        icon: Icon(Icons.delete),
        onPressed: onDeleted,
      ),
    );
  },
  onTaskChanged: (Task task, bool isChecked) {
    setState(() {
      task.isCompleted = isChecked;
    });
  },
  onTaskDeleted: (Task task) {
    setState(() {
      _tasks.remove(task);
    });
  },
);

5. 添加新任务

你可以通过添加一个按钮来允许用户添加新任务：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    setState(() {
      _tasks.add(Task(title: 'New Task', isCompleted: false));
    });
  },
  child: Icon(Icons.add),
),

6. 完整示例

以下是一个完整的示例，展示了如何使用 flutter_checklist 插件来创建一个简单的任务管理应用：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Checklist Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Task> _tasks = [
    Task(title: 'Task 1', isCompleted: false),
    Task(title: 'Task 2', isCompleted: true),
    Task(title: 'Task 3', isCompleted: false),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Task Manager'),
      ),
      body: Checklist(
        tasks: _tasks,
        taskBuilder: (BuildContext context, Task task, Function(bool) onChanged, Function() onDeleted) {
          return ListTile(
            title: Text(task.title),
            leading: Checkbox(
              value: task.isCompleted,
              onChanged: onChanged,
            ),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: onDeleted,
            ),
          );
        },
        onTaskChanged: (Task task, bool isChecked) {
          setState(() {
            task.isCompleted = isChecked;
          });
        },
        onTaskDeleted: (Task task) {
          setState(() {
            _tasks.remove(task);
          });
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _tasks.add(Task(title: 'New Task', isCompleted: false));
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}