Flutter状态管理与数据持久化插件shared_preferences_riverpod的使用

介绍

SharedPreferences_riverpod 插件旨在通过 Riverpod 的 Provider 更轻松地访问 SharedPreferences。这使得在Flutter应用中进行状态管理和数据持久化变得简单而高效。

• shared_preferences
• riverpod

使用方法

基本类型或 List<String> 类型

创建 Provider

你可以通过 createPrefProvider 和泛型参数创建一个 Provider：

final booPrefProvider = createPrefProvider<bool>(
  prefs: (_) => prefs,
  prefKey: "boolValue",
  defaultValue: false,
);

引用和更新值

• 使用 ref.watch(provider) 引用值。
• 使用 await ref.read(provider).update(newValue) 更新值。

示例代码如下：

Consumer(builder: (context, ref, _) {
  return CheckboxListTile(
    title: Text('checkbox'),
    value: ref.watch(booPrefProvider),
    onChanged: (v) async {
      if (v != null) await ref.read(booPrefProvider.notifier).update(v);
    },
  );
});

其他类型

对于非基本类型，你需要提供映射函数来处理序列化和反序列化：

enum EnumValues {
  foo,
  bar,
}

final enumPrefProvider = createMapPrefProvider<EnumValues>(
  prefs: (_) => prefs,
  prefKey: "enumValue",
  mapFrom: (v) => EnumValues.values.firstWhere((e) => e.toString() == v, orElse: () => EnumValues.foo),
  mapTo: (v) => v.toString(),
);

同样地，引用和更新值的方式不变：

Consumer(builder: (context, ref, _) {
  return RadioListTile(
    title: Text('value1'),
    value: EnumValues.foo,
    groupValue: ref.watch(enumPrefProvider),
    onChanged: (EnumValues? v) async {
      if (v != null) await ref.read(enumPrefProvider.notifier).update(v);
    },
  );
});

示例项目

以下是一个完整的示例项目，展示了如何结合 shared_preferences 和 riverpod 来管理应用的状态和持久化数据。

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

late SharedPreferences prefs;

// 定义一个布尔类型的偏好设置provider
final booPrefProvider = createPrefProvider<bool>(
  prefs: (_) => prefs,
  prefKey: "boolValue",
  defaultValue: false,
);

// 定义一个枚举类型的偏好设置provider
enum EnumValues {
  foo,
  bar,
}

final enumPrefProvider = createMapPrefProvider<EnumValues>(
  prefs: (_) => prefs,
  prefKey: "enumValue",
  mapFrom: (v) => EnumValues.values.firstWhere((e) => e.toString() == v, orElse: () => EnumValues.foo),
  mapTo: (v) => v.toString(),
);

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化SharedPreferences实例
  prefs = await SharedPreferences.getInstance();

  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      home: Scaffold(
        appBar: AppBar(title: Text('Shared Preferences with Riverpod')),
        body: Consumer(builder: (context, ref, _) {
          return ListView(children: [
            CheckboxListTile(
              title: Text('BoolPrefNotifier ${ref.watch(booPrefProvider)}'),
              value: ref.watch(booPrefProvider),
              onChanged: (v) async {
                if (v != null) await ref.read(booPrefProvider.notifier).update(v);
              },
            ),
            RadioListTile(
              title: Text('${EnumValues.foo.toString()}'),
              value: EnumValues.foo,
              groupValue: ref.watch(enumPrefProvider),
              onChanged: (EnumValues? v) async {
                if (v != null) await ref.read(enumPrefProvider.notifier).update(v);
              },
            ),
            RadioListTile(
              title: Text('${EnumValues.bar.toString()}'),
              value: EnumValues.bar,
              groupValue: ref.watch(enumPrefProvider),
              onChanged: (EnumValues? v) async {
                if (v != null) await ref.read(enumPrefProvider.notifier).update(v);
              },
            ),
          ]);
        }),
      ),
    );
  }
}

这个例子展示了如何在一个简单的Flutter应用程序中使用 shared_preferences_riverpod 进行状态管理和数据持久化。通过这种方式，您可以轻松地将用户的选择保存到设备上，并在下次启动应用时恢复这些选择。