Flutter状态管理插件riverpod_hook_mutation的使用

Riverpod and hook mutation package

这是一个提供简单方式在Riverpod中管理mutations的包。

Inspiration

解决Riverpod中的mutation问题：https://github.com/rrousselGit/riverpod/issues/1660

Features

• ✅ 使用hooks进行mutation
• ✅ 使用provider进行mutation
• ✅ 使用Flutter的ValueNotifier和AsyncSnapshot来通知状态变化

Getting Started

为了使用这个包，你需要在你的pubspec.yaml文件中添加riverpod_hook_mutation作为依赖项。

dependencies:
  riverpod_hook_mutation: ^0.0.1

然后，运行flutter pub get来获取包。

Usage

以下是一个完整的示例代码，展示了如何使用riverpod_hook_mutation来管理状态。

示例代码

主入口文件 main.dart

import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:riverpod_hook_mutation/riverpod_hook_mutation.dart';

part 'main.g.dart';

Future<void> main() async {
  runApp(
    const ProviderScope(
      child: MaterialApp(
        home: TodosScreen(),
      ),
    ),
  );
}

class TodoRepository {
  static final TodoRepository _instance = TodoRepository._internal();

  factory TodoRepository() => _instance;

  TodoRepository._internal();

  final _todos = [
    TodoModel(
      title: 'Buy milk',
      completed: false,
    ),
    TodoModel(
      title: 'Buy eggs',
      completed: true,
    ),
    TodoModel(
      title: 'Buy bread',
      completed: false,
    ),
  ];

  Future<List<TodoModel>> fetchTodos() async {
    await Future.delayed(const Duration(seconds: 3));
    return _todos;
  }

  Future<TodoModel> createTodo() async {
    return Future.delayed(const Duration(seconds: 3), () {
      final todo = TodoModel(
        title: 'Buy cheese ${Random().nextInt(1000000)}',
        completed: false,
      );
      _todos.add(todo);
      return todo;
    });
  }
}

class TodoModel {
  final String title;
  final bool completed;

  TodoModel({
    required this.title,
    required this.completed,
  });

  Map<String, dynamic> toJson() {
    return {
      'title': title,
      'completed': completed,
    };
  }
}

@riverpod
class Todos extends _$Todos {
  TodoRepository get _repository => TodoRepository();

  @override
  Future<List<TodoModel>> build() {
    return _repository.fetchTodos();
  }

  Future<TodoModel> addTodo() async {
    final result = await _repository.createTodo();
    ref.invalidateSelf();

    if (kDebugMode) print(result.toJson());
    return result;
  }
}

class TodosScreen extends HookConsumerWidget {
  const TodosScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final provider = todosProvider;
    final todos = ref.watch(provider);

    return Scaffold(
      appBar: AppBar(
        actions: [
          FloatingActionButton.small(
            heroTag: null,
            child: const Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) {
                    return const ItemAddScreen();
                  },
                ),
              );
            },
          )
        ],
      ),
      body: todos.when(
        data: (data) {
          return RefreshIndicator(
            onRefresh: () => ref.read(provider.future),
            child: ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                final todo = data[index];
                return ListTile(
                  title: Text(todo.title),
                );
              },
            ),
          );
        },
        error: (error, stackTrace) {
          return Center(
            child: Text('Error: $error'),
          );
        },
        loading: () {
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }
}

class ItemAddScreen extends HookConsumerWidget {
  const ItemAddScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final addTodo = useMutation<TodoModel>();

    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          addTodo.when(
            idle: () {
              return const Icon(Icons.add);
            },
            data: (data) {
              return const Icon(Icons.add);
            },
            error: (error, stackTrace) {
              return const Icon(Icons.error);
            },
            loading: CircularProgressIndicator.new,
          ),
          FilledButton(
            child: const Text('Add .call'),
            onPressed: () {
              final notifier = ref.read(todosProvider.notifier);
              addTodo(
                notifier.addTodo(),
                mounted: () => context.mounted,
              );
            },
          ),
          FilledButton(
            child: const Text('Add .mutate'),
            onPressed: () async {
              final notifier = ref.read(todosProvider.notifier);

              await addTodo.mutate(
                notifier.addTodo(),
                mounted: () => context.mounted,
                loading: Navigator.of(context).pop,
                data: (data) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Todo added: ${data.title}'),
                    ),
                  );
                },
                error: (error, stackTrace) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Error: $error'),
                    ),
                  );
                },
              );
            },
          ),
        ],
      ),
    );
  }
}

Documentation

更多详细信息，请查看文档。

Contributing

欢迎贡献！如果你发现任何问题或有建议，请创建一个新的issue或提交一个pull request。

License

本项目采用MIT License授权。