Flutter安全存储查看插件flutter_secure_storage_view_driver的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter安全存储查看插件flutter_secure_storage_view_driver的使用


StorageView 🔎

Flutter Inspector工具,用于任何数据库、存储和shared_preferences。
从应用程序的UI中检查和修改数据库值。



开始使用

按照这些步骤来使用此包。

添加依赖

pubspec.yaml文件中添加以下依赖:

dependencies:
  storage_view: ^0.1.0-dev.1

导入包

在你的Dart文件中导入storage_view包:

import 'package:storage_view/storage_view.dart';

实现驱动

该包使用一个名为StorageDriver的驱动程序与数据库进行交互。
为了连接到你的数据库,你应该使用可用的驱动程序之一:

  • shared_preferences_storage_view_driver,适用于shared_preferences
  • flutter_secure_storage_view_driver,适用于flutter_secure_storage

或者创建你自己的StorageDriver实现,例如:

class MockStorageDriver implements StorageDriver {
  final _data = <String, dynamic>{
    'test_id': 'test',
  };

  [@override](/user/override)
  FutureOr<Set<String>> getKeys<T>() {
    return _data.keys.toSet() as Set<String>;
  }

  [@override](/user/override)
  FutureOr<T?> read<T>(String key) {
    return _data[key] as T;
  }

  [@override](/user/override)
  FutureOr<void> write<T>({required String key, required T value}) {
    _data[key] = value;
  }

  [@override](/user/override)
  FutureOr<void> delete(String key) {
    _data.remove(key);
  }
}

实现StorageView

在驱动程序连接后,你可以在应用程序的任何地方使用StorageView

final _mockStorageDriver = MockStorageDriver();
Scaffold(
  body: StorageView(storageDriver: _mockStorageDriver),
),

示例代码

以下是完整的示例代码,展示了如何使用flutter_secure_storage_view_driver来查看和管理flutter_secure_storage中的数据。

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:flutter_secure_storage_view_driver/flutter_secure_storage_view_driver.dart';
import 'package:storage_view/storage_view.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  const storage = FlutterSecureStorage();
  runApp(const SharedPreferencesExample(secureStorage: storage));
}

class SharedPreferencesExample extends StatefulWidget {
  const SharedPreferencesExample({
    Key? key,
    required this.secureStorage,
  }) : super(key: key);

  final FlutterSecureStorage secureStorage;

  [@override](/user/override)
  State<SharedPreferencesExample> createState() => _SharedPreferencesExampleState();
}

class _SharedPreferencesExampleState extends State<SharedPreferencesExample> {
  [@override](/user/override)
  void initState() {
    final rnd = Random();
    widget.secureStorage
      ..write(
        key: 'int ${rnd.nextInt(100).toString()}',
        value: '${rnd.nextInt(10000)}',
      )
      ..write(
        key: 'double ${rnd.nextInt(100).toString()}',
        value: '${rnd.nextDouble()}',
      )
      ..write(
        key: 'String  ${rnd.nextInt(100).toString()}',
        value: DateTime.now().toIso8601String(),
      )
      ..write(
        key: 'bool ${rnd.nextInt(100).toString()}',
        value: 'false',
      );
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SharedPreferencesExample',
      theme: ThemeData(
        primarySwatch: Colors.green,
        primaryColor: Colors.green,
      ),
      home: Scaffold(
        body: StorageView(
          storageDriver: FlutterSecureStorageDriver(widget.secureStorage),
        ),
      ),
    );
  }
}

更多关于Flutter安全存储查看插件flutter_secure_storage_view_driver的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter安全存储查看插件flutter_secure_storage_view_driver的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用flutter_secure_storage_view_driver插件的代码案例。请注意,flutter_secure_storage_view_driver并不是一个广为人知的Flutter插件,我假设你可能是指用于查看和管理Flutter安全存储(如flutter_secure_storage)内容的工具或自定义实现。由于这样的插件可能并不存在于官方pub.dev仓库中,我将提供一个使用flutter_secure_storage插件的示例,并展示如何安全地存储和读取数据。

首先,确保你已经在pubspec.yaml文件中添加了flutter_secure_storage依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_secure_storage: ^5.0.2  # 请检查最新版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以使用以下代码来安全地存储和读取数据:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Secure Storage Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SecureStorageScreen(),
    );
  }
}

class SecureStorageScreen extends StatefulWidget {
  @override
  _SecureStorageScreenState createState() => _SecureStorageScreenState();
}

class _SecureStorageScreenState extends State<SecureStorageScreen> {
  final FlutterSecureStorage storage = FlutterSecureStorage();
  String _storedValue = '';
  final String key = 'example_key';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Secure Storage Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(labelText: 'Value to Store'),
              onEditingComplete: () async {
                String inputValue = _textEditingController.text;
                await storage.write(key: key, value: inputValue);
                setState(() {
                  _storedValue = inputValue; // 更新显示,但在实际应用中,你可能不会立即这样做
                });
                // 实际读取以验证存储
                String readValue = await storage.read(key: key);
                print('Stored Value: $readValue');
              },
              controller: _textEditingController,
            ),
            SizedBox(height: 20),
            Text('Stored Value: $_storedValue'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                String readValue = await storage.read(key: key);
                setState(() {
                  _storedValue = readValue ?? 'No Value Stored';
                });
              },
              child: Text('Read Stored Value'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                await storage.delete(key: key);
                setState(() {
                  _storedValue = 'Value Deleted';
                });
              },
              child: Text('Delete Stored Value'),
            ),
          ],
        ),
      ),
    );
  }

  final TextEditingController _textEditingController = TextEditingController();

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,它允许用户输入一个值,然后将该值安全地存储在设备的密钥链中。用户还可以读取和删除存储的值。

  • FlutterSecureStorage 实例用于管理安全存储。
  • write 方法用于存储数据。
  • read 方法用于读取数据。
  • delete 方法用于删除存储的数据。

请注意,由于安全存储依赖于设备的密钥链,因此在iOS和Android上的实现可能会有所不同,但flutter_secure_storage插件为你抽象了这些差异。

如果你确实在寻找一个名为flutter_secure_storage_view_driver的特定插件,并且它在pub.dev上不存在,你可能需要查看是否有类似的社区项目或自己实现一个用于查看和管理安全存储内容的工具。这通常涉及到创建一个UI界面,让用户能够查看和操作存储的数据。

回到顶部