Flutter调试工具插件shared_preferences_debugger的使用

shared_preferences_debugger

此包旨在简化shared_preferences插件包的调试工作。通过使用这个包，你可以轻松地显示、复制到剪贴板以及删除存储在shared_preferences中的数据。

使用方法

只需在需要的地方使用SharedPreferencesDebugPage()即可。SharedPreferencesDebugPage()是Scaffold的包装器，因此建议像下面的代码一样作为新屏幕使用。

IconButton(
  icon: const Icon(Icons.bug_report),
  onPressed: () {
    Navigator.of(context).push<void>(
      MaterialPageRoute(
        builder: (context) => const SharedPreferencesDebugPage(),
      ),
    );
  },
),

示例Demo

以下是一个完整的示例demo，展示了如何使用shared_preferences_debugger：

import 'dart:math';

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

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

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

  @override
  Widget build(BuildContext context) {
    const title = 'Shared preferences debugger';
    return MaterialApp(
      title: title,
      theme: ThemeData.from(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
      ),
      home: Builder(
        builder: (context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text(title),
              actions: [
                IconButton(
                  color: Theme.of(context).colorScheme.primary,
                  onPressed: () {
                    Navigator.of(context).push<void>(
                      MaterialPageRoute(
                        builder: (context) =>
                            const SharedPreferencesDebugPage(),
                        fullscreenDialog: true,
                      ),
                    );
                  },
                  icon: const Icon(Icons.bug_report),
                ),
              ],
            ),
            body: Center(
              child: ElevatedButton.icon(
                icon: const Icon(Icons.add),
                label: const Text('Add sample value'),
                onPressed: () async {
                  final messenger = ScaffoldMessenger.of(context);
                  final pref = await SharedPreferences.getInstance();
                  final key = _generateRandomString(10);
                  final value = _generateRandomString(30);
                  final success = await pref.setString(key, value);
                  // ignore: avoid_print
                  print('Set keyValue: $success -> {$key, $value}');
                  messenger
                    ..hideCurrentSnackBar()
                    ..showSnackBar(
                      SnackBar(
                        content:
                            Text('Set keyValue: $success -> {$key, $value}'),
                        behavior: SnackBarBehavior.floating,
                      ),
                    );
                },
              ),
            ),
          );
        },
      ),
    );
  }
}

String _generateRandomString(int length) {
  const randomChars =
      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charsLength = randomChars.length;
  final rand = Random();
  final codeUnits = List.generate(
    length,
    (index) {
      final n = rand.nextInt(charsLength);
      return randomChars.codeUnitAt(n);
    },
  );
  return String.fromCharCodes(codeUnits);
}

功能说明

• 添加随机键值对：点击“Add sample value”按钮会在shared_preferences中添加一个随机生成的键值对，并显示操作结果。
• 打开调试页面：点击右上角的bug图标会打开SharedPreferencesDebugPage页面，在这里可以查看、复制和删除shared_preferences中的所有键值对。

通过这个插件，开发者可以在开发过程中更方便地调试和管理shared_preferences中的数据。