Flutter代码生成插件riverpod_mutations_generator的使用

Flutter代码生成插件riverpod_mutations_generator的使用

你好！这是一个尝试填补由riverpod缺乏突变支持所留下的空白。详情可参见此问题。

首先，导入riverpod_mutations_annotation和riverpod_annotation：

dependencies:
  riverpod: ^2.4.4 # 你的首选riverpod包
  riverpod_annotation: ^2.2.0  
  riverpod_mutations_annotation: ^1.0.0

dev_dependencies:
  build_runner: ^2.3.3
  riverpod_generator: ^2.3.5
  riverpod_mutations_generator: ^1.0.0

接下来，我们通过示例来展示如何使用riverpod_mutations_generator。

示例代码

以下是一个完整的示例代码，展示了如何使用riverpod_mutations_generator。

定义模型类

首先定义一个简单的Todo模型类：

class Todo {
  const Todo(this.id, this.todo);
  final int id;
  final String todo;
}

使用Riverpod Provider定义状态管理

接下来，在example.g.dart文件中生成代码，并在example.dart文件中使用这些代码：

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:riverpod_mutations_annotation/riverpod_mutations_annotation.dart';

part 'example.g.dart';

@riverpod
class TodoList extends _$TodoList {
  @override
  FutureOr<List<Todo>> build() => [];

  @mutation
  Future<void> addTodo(Todo newTodo) async {
    // 模拟一些操作
    await Future.delayed(Duration.zero);
    // 将新项目加载到列表中
    state = AsyncData((await future)..add(newTodo));

    // 或者这样做，以让构建方法获取最新信息
    ref.invalidateSelf();
    await future;
  }

  @mutation
  Future<void> removeTodo({@mutationKey required int id}) async {
    // 模拟一些操作
    await Future.delayed(Duration.zero);

    // 从列表中移除项目
    state = AsyncData((await future)..removeWhere((e) => e.id == id));

    // 或者这样做，以让构建方法获取最新信息
    ref.invalidateSelf();
    await future;
  }
}

void example(AutoDisposeRef ref) {
  // 正常使用
  final todoList = ref.watch(todoListProvider);

  final addTodo = ref.watch(todoListProvider.addTodo);

  switch (addTodo) {
    case AddTodoMutationIdle():
      print('Idle/Initial');

    case AddTodoMutationLoading():
      print('Loading...');

    case AddTodoMutationSuccess():
      print('Success!');

    case AddTodoMutationFailure(:final error):
      print(error.toString());
  }

  addTodo(Todo(1, 'newTodo'));

  final removeTodo = ref.watch(todoListProvider.removeTodo(id: 1));

  // 用@mutationKey标记的参数已被删除，因为它现在存储在`removeTodo.params.id`对象中
  removeTodo();

  final int storedId = removeTodo.params.id;
}

在UI中使用

最后，在UI中使用这些突变方法：

return Consumer(
  builder: (context, ref, child) {
    // 正常的todo列表
    List<Todo> todos = ref.watch(todoListProvider);
    // 这里是有趣的部分
    AddTodoMutation addTodo = ref.watch(todoListProvider.addTodo);

    // 这将允许你多次跟踪同一个方法，就像一个家庭一样。
    // 注意：参数已被从`removeTodo()`中删除，如所示。
    // 这个特定值现在存储在`removeTodo.params.id`对象中
    RemoveTodoMutation removeTodo = ref.watch(todoListProvider.removeTodo(id: 4));

    return Row(
      children: [
        AddButton(
          // 调用Todo.addTodo方法
          // 如果当前正在加载，则禁用按钮
          onTap: addTodo is AddTodoMutationLoading ? null : () => addTodo(Todo()),
          // 显示侧面效果的状态
          trailing: switch (addTodo) {
            AddTodoMutationInitial() => Icon(Icons.circle),
            AddTodoMutationLoading() => CircularProgressIndicator(),
            AddTodoMutationSuccess() => Icon(Icons.check),
            AddTodoMutationFailure(:final error) => IconButton(Icons.info, onPressed: () => showErrorDialog(error)),
          },
        ),
        RemoveButton(
          // 注意，参数已被删除，因为它现在存储在`removeTodo.params.id`对象中
          onTap: removeTodo is RemoveTodoMutationLoading ? null : () => removeTodo(),
          // 显示侧面效果的状态
          trailing: switch (removeTodo) {
            RemoveTodoMutationInitial() => Icon(Icons.circle),
            RemoveTodoMutationLoading() => CircularProgressIndicator(),
            RemoveTodoMutationSuccess() => Icon(Icons.check),
            RemoveTodoMutationFailure(:final error) => IconButton(Icons.info, onPressed: () => showErrorDialog(error)),
          },
        );
      ],
    );
  },
);