Flutter状态持久化插件hydrated_riverpod的使用

Flutter状态持久化插件hydrated_riverpod的使用

hydrated_riverpod 是 Riverpod 状态管理库的一个扩展，它能够自动持久化和恢复 Riverpod 状态。类似于 hydrated_bloc，hydrated_riverpod 提供了一个 Storage 接口，可以与任何存储提供程序一起工作。默认情况下，它使用 HydratedStorage，该存储基于 hive 实现，提供了一个跨平台、高性能的存储层。

使用步骤

1. 设置 HydratedRiverpod

在 main.dart 文件中，首先需要初始化 HydratedRiverpod 并设置存储目录。可以通过 path_provider 包来获取应用的文档目录作为存储路径。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hydrated_riverpod/hydrated_riverpod.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  // 确保Flutter环境已初始化
  WidgetsFlutterBinding.ensureInitialized();

  // 获取存储目录
  final storageDirectory = await getApplicationDocumentsDirectory();
  
  // 创建HydratedStorage实例
  final storage = await HydratedStorage.build(
    storageDirectory: storageDirectory,
  );

  // 初始化HydratedRiverpod
  HydratedRiverpod.initialize(storage: storage);

  // 运行应用程序
  runApp(const ProviderScope(child: MyApp()));
}

2. 创建一个 HydratedStateNotifier

接下来，创建一个继承自 HydratedStateNotifier 的类，用于管理状态并实现 fromJson 和 toJson 方法，以便将状态持久化到存储中。

import 'package:hydrated_riverpod/hydrated_riverpod.dart';

// 定义一个计数器状态管理器
class Counter extends HydratedStateNotifier<int> {
  Counter() : super(0); // 初始状态为0

  // 增加计数器
  void increment() => state++;

  // 减少计数器
  void decrement() => state--;

  // 从JSON恢复状态
  @override
  int fromJson(Map<String, dynamic> json) => json['value'] as int;

  // 将状态转换为JSON
  @override
  Map<String, int> toJson(int state) => {'value': state};
}

3. 创建一个 HydratedMixin 的 StateNotifier

如果你不想继承 HydratedStateNotifier，也可以通过混合 HydratedMixin 来实现相同的功能。

import 'package:hydrated_riverpod/hydrated_riverpod.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class BrightnessNotifier extends StateNotifier<Brightness> with HydratedMixin {
  BrightnessNotifier() : super(Brightness.light); // 初始状态为亮模式

  // 切换亮度模式
  void toggleBrightness() {
    state = state == Brightness.light ? Brightness.dark : Brightness.light;
  }

  // 从JSON恢复状态
  @override
  Brightness fromJson(Map<String, dynamic> json) {
    return json['brightness'] == null ? Brightness.light : Brightness.values[json['brightness'] as int];
  }

  // 将状态转换为JSON
  @override
  Map<String, dynamic> toJson(Brightness state) {
    return {'brightness': state.index};
  }
}

4. 使用 Provider 在 UI 中管理状态

在 MyApp 和 MyHomePage 中，使用 Provider 来监听和更新状态。

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

final counterProvider = HydratedStateProvider((_) => 0, name: '_counter');
final brightnessProvider = StateNotifierProvider<BrightnessNotifier, Brightness>((_) => BrightnessNotifier());

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final brightness = ref.watch(brightnessProvider);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(brightness: brightness),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider.state).state;

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.brightness_6),
            onPressed: () => ref.read(brightnessProvider.notifier).toggleBrightness(),
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {
              ref.read(counterProvider.notifier).state++;
            },
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () {
              ref.read(counterProvider.notifier).state--;
            },
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.delete_forever),
            onPressed: () {
              HydratedRiverpod.instance?.storage.clear(); // 清除所有持久化数据
            },
          ),
        ],
      ),
    );
  }
}

自定义存储目录

你可以根据需要自定义存储目录。例如，使用 path_provider 获取应用的文档目录：

final storage = await HydratedStorage.build(
  storageDirectory: await getApplicationDocumentsDirectory(),
);

自定义存储实现

如果你对默认的 HydratedStorage 不满意，可以实现自己的 Storage 接口。例如：

class MyHydratedStorage implements Storage {
  @override
  dynamic read(String key) {
    // 实现读取逻辑
  }

  @override
  Future<void> write(String key, dynamic value) async {
    // 实现写入逻辑
  }

  @override
  Future<void> delete(String key) async {
    // 实现删除逻辑
  }

  @override
  Future<void> clear() async {
    // 实现清除逻辑
  }
}

然后在 main.dart 中使用自定义的存储：

HydratedRiverpod.initialize(storage: MyHydratedStorage());