Key-Value Inspection

Inspect, edit, and delete SharedPreferences and flutter_secure_storage entries at runtime.

Key-value inspectors let you read, write, and delete entries in persistent storage (SharedPreferences, flutter_secure_storage) from the remote UI at runtime.

SharedPreferences

Setup

import 'package:shared_preferences/shared_preferences.dart';
import 'package:xray_shared_preferences_inspector/xray_shared_preferences_inspector.dart';

final prefs = await SharedPreferences.getInstance();
final sharedPrefsInspector = XRaySharedPreferencesInspector(prefs: prefs);

Pass it to XRayInspectorServerConfig alongside your other inspectors. See Quick Start for full server setup.

Secure Storage

Setup

import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:xray_secure_storage_inspector/xray_secure_storage_inspector.dart';

final secureStorageInspector = XRaySecureStorageInspector(
  secureStorage: const FlutterSecureStorage(),
);

Security notice: Only include this inspector in debug/QA builds. Exposing secure storage over the network is a security risk — do not ship it in production.

Custom key-value source

Implement XRayKeyValueSource to inspect any key-value store:

import 'package:xray_inspector/xray_inspector.dart';

class MyCustomSource implements XRayKeyValueSource {
  @override
  String get title => 'My Store';

  @override
  Future<Map<String, String>> readAll() async {
    // Return all key-value pairs
    return {'key': 'value'};
  }

  @override
  Future<void> write(String key, String value) async {
    // Persist the value
  }

  @override
  Future<void> delete(String key) async {
    // Remove the key
  }
}

// Use it with XRayKeyValueInspector
final customInspector = XRayKeyValueInspector(
  source: MyCustomSource(),
);

Accessing entries in code

// Trigger a refresh (reads all entries from the source)
await inspector.refresh();

// Reactive entries
ValueListenableBuilder<List<InspectorKeyValueEntry>>(
  valueListenable: inspector.entriesNotifier,
  builder: (context, entries, _) {
    return ListView(
      children: entries.map((e) => Text('${e.key}: ${e.value}')).toList(),
    );
  },
);

Writing and deleting entries

await inspector.write('theme', 'dark');
await inspector.delete('onboarding_complete');

Calling write or delete automatically triggers a refresh.

Clearing all entries

inspector.clear(); // Deletes all keys from the source

Key-value entry model

FieldTypeDescription
keyStringEntry key
valueStringEntry value (always string)

Remote UI capabilities

When connected via the remote UI, you can:

  • Browse all entries alphabetically
  • Edit values inline
  • Delete individual entries
  • Refresh the list on demand