Flutter偏好设置管理插件katana_prefs的使用

Katana Prefs

[GitHub] | [YouTube] | [Packages] | [Twitter] | [Threads] | [LinkedIn] | [mathru.net]

简介

Shared Preferences 是一个非常有用的插件。

我认为这个插件是存储应用程序简单数据的最佳方式。

然而，在使用系统时，我有以下抱怨：

• 需要记住键，因为键将是字符串类型。
• 要检索的值的类型也取决于键，并且必须记住。
• SharedPreferences 的实例需要异步获取。

在大多数情况下，我认为它们被封装在一个单独的类中或类似的东西中，以便更易于使用。

为了消除上述问题，我创建了以下包：

• 使用类似于 Freezed 的标记自动生成读取/写入 SharedPreferences 数据的类
• 参数类型和键是预定义的，允许类型安全的实现
• 缓存 SharedPreferences 实例，以便可以同步获取数据
• 继承自 ChangeNotifier，因此可以检测值的变化并执行某些操作

例如，使用以下语句：

[@prefs](/user/prefs)
class PrefsValue with _$PrefsValue, ChangeNotifier {
  factory PrefsValue({
    String? userToken,
    required double volumeSetting,
  }) = _PrefsValue;
}

当运行 build_runner 时，将自动生成一个可以读取和写入 SharedPreferences 数据的类。

通过定义这一点，可以在任何地方读取和写入数据。

final appPrefs = PrefsValue(volumeSetting: 0.5);

class PrefsPage extends StatefulWidget {
  const PrefsPage({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() => PrefsPageState();
}

class PrefsPageState extends State<PrefsPage> {

  [@override](/user/override)
  void initState() {
    super.initState();
    prefs.addListener(() {
      setState(() {});
    });
    appPrefs.load();
  }

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref){
    final volumeSetting = appPrefs.volumeSetting.get();

    ~~~~
    appPrefs.volumeSetting.set(1.0); // 在此，appPrefs 也会收到更改通知并重新更新小部件。
    ~~~~
  }
}

安装

导入以下包以使用 build_runner 进行代码生成。

flutter pub add katana_prefs
flutter pub add --dev build_runner
flutter pub add --dev katana_prefs_builder

实现

创建类

创建一个类如下：

添加 part '(filename).prefs.dart';。

使用 [@prefs](/user/prefs) 注解定义的类，并混入 _$(定义的类名) 和 ChangeNotifier。

构造函数在 factory 中创建，并定义参数中要使用的值。

（必需的值用 required 标记；如果没有标记为必需，则保留原样。）

在构造函数之后，写入 = _(定义的类名)。

// prefs_value.dart

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

part 'prefs_value.prefs.dart';

[@prefs](/user/prefs)
class PrefsValue with _$PrefsValue, ChangeNotifier {
  factory PrefsValue({
    String? userToken,
    required double volumeSetting,
  }) = _PrefsValue;
}

代码生成

通过输入以下命令进行自动代码生成。

flutter pub run build_runner build --delete-conflicting-outputs

如何使用

全局定义值。

创建对象时，输入在 <code>required</code> 中指定的值。这将成为初始值。

final appPrefs = PrefsValue(volumeSetting: 0.5);

在加载第一个值之前，调用 <code>load()</code> 方法并等待其完成。

（也可以通过监视 <code>loading</code> 字段来等待结束。）

@Override
void initState() {
  super.initState();
  appPrefs.load();
}

如果需要，可以通过 <code>addListener</code> 监视状态。

@Override
void initState() {
  super.initState();
  prefs.addListener(() {
    setState(() {});
  });
  appPrefs.load();
}

可以通过 <code>appPrefs.(定义的值).get()</code> 从 SharedPreferences 中检索数据。

final volumeSetting = appPrefs.volumeSetting.get();

可以通过 <code>appPrefs.(定义的值).set(value)</code> 将数据存储到 SharedPreferences。

保存完成后，将调用 <code>notifyListeners()</code> 以执行由 <code>addListener</code> 监视的回调。

appPrefs.volumeSetting.set(1.0);

GitHub 赞助者

赞助者永远受欢迎。感谢您的支持！

https://github.com/sponsors/mathrunet

示例代码

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:katana_prefs/katana_prefs.dart';

part 'main.prefs.dart';

[@prefs](/user/prefs)
class PrefsValue with _$PrefsValue, ChangeNotifier {
  factory PrefsValue({
    String? userToken,
    required double volumeSetting,
  }) = _PrefsValue;
  PrefsValue._();
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PrefsPage(),
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

class PrefsPage extends StatefulWidget {
  const PrefsPage({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() => PrefsPageState();
}

class PrefsPageState extends State<PrefsPage> {
  final prefs = PrefsValue(volumeSetting: 0.5);

  [@override](/user/override)
  void initState() {
    super.initState();
    prefs.addListener(() {
      setState(() {});
    });
    prefs.load();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter Demo")),
      body: ListView(
        children: [
          ListTile(
            title: TextField(
              controller: TextEditingController(text: prefs.userToken.get()),
              onChanged: (val) async {
                await prefs.userToken.set(val);
              },
            ),
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Text("Volume Settings"),
          ),
          ListTile(
            title: Slider(
              value: prefs.volumeSetting.get(),
              onChanged: (val) {
                prefs.volumeSetting.set(val);
              },
            ),
            trailing: Text(
              "${prefs.volumeSetting.get().toStringAsFixed(1)}/1.0",
            ),
          ),
        ],
      ),
    );
  }
}