Flutter任务管理插件get_todos的使用

在本教程中，我们将介绍如何使用Flutter插件get_todos来管理任务。该插件灵感来源于show-todo。

插件功能

get_todos插件允许用户轻松创建、读取、更新和删除任务。它可以帮助开发者快速实现任务管理功能。

使用步骤

1. 添加依赖

首先，在pubspec.yaml文件中添加get_todos插件作为依赖：

dependencies:
  get_todos: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

2. 初始化插件

在您的main.dart文件中初始化get_todos插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoScreen(),
    );
  }
}

3. 创建任务屏幕

接下来，创建一个简单的任务屏幕，用于展示和管理任务：

class TodoScreen extends StatefulWidget {
  @override
  _TodoScreenState createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  final todoController = TodoController(); // 初始化TodoController

  @override
  void initState() {
    super.initState();
    todoController.loadTodos(); // 加载任务
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('任务管理'),
      ),
      body: FutureBuilder<List<Todo>>(
        future: todoController.getTodos(), // 获取任务列表
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败'));
          } else {
            final todos = snapshot.data!;
            return ListView.builder(
              itemCount: todos.length,
              itemBuilder: (context, index) {
                final todo = todos[index];
                return ListTile(
                  title: Text(todo.title),
                  subtitle: Text(todo.description ?? ''),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () {
                      todoController.deleteTodo(todo.id!); // 删除任务
                      setState(() {}); // 更新UI
                    },
                  ),
                );
              },
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showAddTodoDialog(context); // 显示添加任务对话框
        },
        child: Icon(Icons.add),
      ),
    );
  }

  void showAddTodoDialog(BuildContext context) {
    String title = '';
    String description = '';

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('添加任务'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                onChanged: (value) => title = value,
                decoration: InputDecoration(labelText: '标题'),
              ),
              TextField(
                onChanged: (value) => description = value,
                decoration: InputDecoration(labelText: '描述'),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop(); // 关闭对话框
              },
              child: Text('取消'),
            ),
            TextButton(
              onPressed: () {
                todoController.addTodo(Todo(title: title, description: description)); // 添加任务
                Navigator.of(context).pop(); // 关闭对话框
                setState(() {}); // 更新UI
              },
              child: Text('确定'),
            ),
          ],
        );
      },
    );
  }
}

4. 定义任务模型

定义一个Todo类来表示任务：

class Todo {
  final String? id;
  final String title;
  final String? description;

  Todo({this.id, required this.title, this.description});
}

5. 定义控制器

定义一个TodoController类来管理任务：

import 'dart:convert';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/services.dart';

class TodoController {
  List<Todo> _todos = [];

  Future<void> loadTodos() async {
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/todos.json');
    if (await file.exists()) {
      final data = await file.readAsString();
      final jsonList = jsonDecode(data) as List<dynamic>;
      _todos = jsonList.map((json) => Todo.fromJson(json)).toList();
    }
  }

  Future<List<Todo>> getTodos() async {
    return _todos;
  }

  Future<void> addTodo(Todo todo) async {
    _todos.add(todo);
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/todos.json');
    final data = jsonEncode(_todos);
    await file.writeAsString(data);
  }

  Future<void> deleteTodo(String id) async {
    _todos.removeWhere((todo) => todo.id == id);
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/todos.json');
    final data = jsonEncode(_todos);
    await file.writeAsString(data);
  }
}