Flutter本地数据存储插件shared_preferences_dtx的使用

简介

shared_preferences_dtx 是一个扩展包，提供了对 shared_preferences 包中最常用属性、函数和便利方法的简单访问。它简化了本地数据存储的操作，使得开发更加高效。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  shared_preferences:
  shared_preferences_dtx:

然后在需要使用的地方导入该包：

import 'package:shared_preferences_dtx/shared_preferences_dtx.dart';

扩展方法

设置值

final preferences = await SharedPreferences.getInstance();

// 设置值
await preferences.setValue('String', 'String');
await preferences.setValue('bool', false);
await preferences.setValue('int', 2);
await preferences.setValue('double', 2.5);
await preferences.setValue('list', <String>['foo', 'bar']);

获取值

preferences.getValue<String>('String');
preferences.getValue<bool>('bool');
preferences.getValue<int>('int');
preferences.getValue<double>('double');
preferences.getValue<List<String>>('list');

获取值或默认值

preferences.getOrElse('String', defaultValue: 'value');
preferences.getOrElse('bool', defaultValue: false);
preferences.getOrElse('int', defaultValue: 0);
preferences.getOrElse('double', defaultValue: 3.9);
preferences.getOrElse('list', defaultValue: <String>[]);

默认值

你可以使用 getTypeOrElse 方法来替代 getType ?? defaultValue，适用于任何类型。

preferences.getStringOrElse('String', defaultValue: 'value');
preferences.getBoolOrElse('bool', defaultValue: false);

新类型的支持

// 设置值
await preferences.setValue('color', Colors.black);
await preferences.setValue('theme_mode', ThemeMode.dark);
await preferences.setValue('user', {'name': 'user', 'age': 20});
await preferences.setValue('date_time', DateTime(2022, 07, 12));

// 获取值
preferences.getValue<Color>('color');
preferences.getValue<ThemeMode>('theme_mode');
preferences.getValue<Map<String, dynamic>>('user');
preferences.getValue<DateTime>('date_time');

// 获取值或默认值
preferences.getOrElse('color', defaultValue: Colors.black);
preferences.getOrElse('theme_mode', defaultValue: ThemeMode.dark);
preferences.getOrElse('user', defaultValue: {'name': 'user', 'age': 20});
preferences.getOrElse('date_time', defaultValue: DateTime(2022, 07, 12));

或者使用特定的方法：

// 设置值
await preferences.setColor('color', Colors.black);
await preferences.setThemeMode('theme_mode', ThemeMode.dark);
await preferences.setJson('user', {'name': 'user', 'age': 20});
await preferences.setDateTime('date_time', DateTime(2022, 07, 12)); // 保存为 UTC

// 获取值
preferences.getColor('color') ?? Colors.black;
preferences.getThemeMode('theme_mode') ?? ThemeMode.light;
preferences.getJson('user') ?? {'name': 'user', 'age': 20};
preferences.getDateTime('date_time') ?? DateTime(2022, 07, 12); // UTC

注意事项

日期时间保存为标准 Unix 时间戳的毫秒数，不包含时区信息。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 shared_preferences_dtx 进行本地数据存储。

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:shared_preferences_dtx/shared_preferences_dtx.dart';

Future<void> main() async {
  final preferences = await SharedPreferences.getInstance();
  runApp(MyApp(preferences: preferences));
}

class MyApp extends StatefulWidget {
  final SharedPreferences preferences;

  const MyApp({
    super.key,
    required this.preferences,
  });

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  late final SharedPreferences preferences = widget.preferences;
  late ThemeMode themeMode = preferences.getOrElse(
    'theme_mode',
    defaultValue: ThemeMode.light,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData.dark(),
      themeMode: themeMode,
      home: MyHomePage(
        title: 'Flutter Demo Home Page',
        preferences: widget.preferences,
        onChangeThemeMode: () {
          setState(() {
            if (themeMode == ThemeMode.light) {
              themeMode = ThemeMode.dark;
            } else {
              themeMode = ThemeMode.light;
            }
          });
          preferences.setThemeMode('theme_mode', themeMode);
        },
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final SharedPreferences preferences;
  final void Function() onChangeThemeMode;

  const MyHomePage({
    super.key,
    required this.title,
    required this.preferences,
    required this.onChangeThemeMode,
  });

  final String title;

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  late final SharedPreferences preferences = widget.preferences;
  late int _counter = preferences.getOrElse('count', defaultValue: 0);

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
    preferences.setInt('count', _counter);
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
    preferences.setInt('count', _counter);
  }

  void _clear() {
    setState(() => _counter = 0);
    preferences.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: const Icon(Icons.brightness_4_sharp),
            onPressed: widget.onChangeThemeMode,
          ),
          IconButton(
            icon: const Icon(Icons.delete_rounded),
            onPressed: () {
              _clear();
              widget.onChangeThemeMode();
            },
          ),
        ],
      ),
      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.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: _decrementCounter,
            tooltip: 'Decrement',
            child: const Icon(Icons.remove),
          ),
          const SizedBox(height: 16),
          FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

这个示例代码展示了如何使用 shared_preferences_dtx 来存储和读取计数器的值，并且支持主题模式的切换。希望这个示例对你有所帮助！