Flutter持久化状态管理插件riverpod_persistent_state的使用

Flutter持久化状态管理插件riverpod_persistent_state的使用

特性

将状态存储在持久化内存中，并在应用程序重启后恢复。

开始使用

安装

在项目目录中执行以下脚本，或者在 pubspec.yaml 文件中添加依赖项：

flutter pub add riverpod_persistent_state

使用方法

首先，定义一个具有唯一名称的provider，并将其用作状态提供器。

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

// 定义一个状态类
class AuthorizationValue {
  final String token;
  final bool isAuthorized;

  AuthorizationValue({required this.token, required this.isAuthorized});

  factory AuthorizationValue.unauthorized() {
    return AuthorizationValue(token: '', isAuthorized: false);
  }

  factory AuthorizationValue.fromJson(Map<String, dynamic> json) {
    return AuthorizationValue(
      token: json['token'],
      isAuthorized: json['isAuthorized'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'token': token,
      'isAuthorized': isAuthorized,
    };
  }
}

// 创建一个持久化状态提供器
final tokenProvider = PersistentStateProvider<AuthorizationValue>(
  store: HiveJsonStore(
    defaultValue: () => const AuthorizationValue.unauthorized(),
    fromJson: (json) => AuthorizationValue.fromJson(json),
    boxName: 'token',
  ),
);

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Riverpod Persistent State Example'),
        ),
        body: Center(
          child: Consumer(
            builder: (context, ref, _) {
              final authValue = ref.watch(tokenProvider);

              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Token: ${authValue.token}'),
                  Text('Is Authorized: ${authValue.isAuthorized} ?'),
                  ElevatedButton(
                    onPressed: () {
                      // 修改状态
                      ref.read(tokenProvider.notifier).state = AuthorizationValue(
                        token: '123456',
                        isAuthorized: true,
                      );
                    },
                    child: Text('授权'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

更多关于Flutter持久化状态管理插件riverpod_persistent_state的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter持久化状态管理插件riverpod_persistent_state的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


riverpod_persistent_state 是一个用于 Flutter 状态管理的插件，它结合了 Riverpod 和持久化状态管理的功能。通过这个插件，你可以轻松地将应用的状态持久化到本地存储（如 SharedPreferences 或 Hive），以便在应用重启时恢复状态。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^2.0.0
  riverpod_persistent_state: ^0.1.0

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建 Provider

你可以使用 PersistentStateNotifier 来创建一个持久化的状态 Provider。这个 Provider 会自动将状态保存到本地存储。

import 'package:riverpod/riverpod.dart';
import 'package:riverpod_persistent_state/riverpod_persistent_state.dart';

// 定义一个持久化的状态 Provider
final counterProvider = PersistentStateNotifierProvider<CounterNotifier, int>(
  () => CounterNotifier(),
);

// 定义 Notifier 类
class CounterNotifier extends PersistentStateNotifier<int> {
  CounterNotifier() : super(0); // 初始值为 0

  void increment() {
    state++; // 更新状态
  }
}

2. 使用 Provider

在 UI 中使用这个 Provider 来读取和更新状态。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_provider.dart'; // 假设你把上面的代码放在这个文件里

class CounterPage extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Persistent Counter'),
      ),
      body: Center(
        child: Text(
          'Counter: $counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ref.read(counterProvider.notifier).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

3. 配置持久化存储

默认情况下，riverpod_persistent_state 使用 SharedPreferences 作为持久化存储。你可以在 main.dart 中初始化 SharedPreferences：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  
  runApp(
    ProviderScope(
      overrides: [
        // 配置 SharedPreferences 实例
        sharedPreferencesProvider.overrideWithValue(prefs),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

高级用法

自定义存储

如果你不想使用 SharedPreferences，你可以自定义存储方式。只需要实现 PersistentStorage 接口，并在 Provider 中指定自定义的存储实例。

class MyCustomStorage implements PersistentStorage {
  [@override](/user/override)
  Future<void> save(String key, dynamic value) async {
    // 自定义保存逻辑
  }

  [@override](/user/override)
  Future<dynamic> load(String key) async {
    // 自定义加载逻辑
  }

  [@override](/user/override)
  Future<void> delete(String key) async {
    // 自定义删除逻辑
  }
}

final counterProvider = PersistentStateNotifierProvider<CounterNotifier, int>(
  () => CounterNotifier(),
  storage: MyCustomStorage(),
);
回到顶部