Flutter 匠心千刃 | SHA256 加密


theme: cyanosis

0. 本文目标

本文介绍一下如何在 Flutter 中进行 SHA256加密。并结合TolyUI 在 匠心千刃 中搭建 sha256加密的交互界面 ,本文目标如下所示:

可以在输入框中输入字符串,会自动计算输入内容的sha256值:

也可以选择文件,计算该文件的sha256值:

1. SHA256能干什么

每个人的指纹是独一无二的,采集的指纹可以和犯罪嫌疑人对比是否一致,来检验凶手的身份。而不必对比案发现场的凶手和嫌疑人的每个细胞是否一致。

那对于一个文件,或说字节数组来说,有什么可以像指纹一样,能标识它的身份。让数据的唯一性既可以简洁地表达,又可以跨越时间与空间呢?sha256 加密就可以做到,当然也可以选取其他的加密方式。

理解了这一点,sha256的价值就非常明显了。比如下载文件的网站,一般都会提供该文件对应的sha值。这样在现在后,就可以根据sha值校验下载的文件是否完整。编程开发中文件上传、下载涉及前后端通信,两者可以通过sha值,来检验数据传输过程中的完整性。


2.Dart中如何使用 SHA256加密

像这样的通用算法,一般都会有三方库的支持。可以使用 crypto 库非常方便地计算一个字节数组的 sha256值。目前我的 Dart 命令行工具 toly 已经支持了 SHA256 的命令,如下所示:toly sha256 -s 可以加密若干个字符串:

toly sha256 -s 张风捷特烈 TolyUI 'Flutter Unit'

sha256.convert 方法即可加密字符数组 ,所以需要将文本通过 utf8 进行编码,得到 Unit8List ,然后将其作为入参进行转换。代码如下:

dart String arg = '张风捷特烈'; Uint8List data = utf8.encode(arg); Digest digest = sha256.convert(data);


toly sha256 -f 可以计算若干个文件的 sha256 值,其中 -f 可以省略:

任何文件都是字节数组,可以通过 File 对象读取得到 Uint8List 对象,然后使用 sha256.convert 即可:

dart File file = File(r'D:\Files\add.zip'); Uint8List data = await file.readAsBytes(); Digest digest = sha256.convert(data);


3. 使用Flutter搭建交互界面

命令行毕竟操作不是很方便,交互界面可以有更大的使用场景。对于点点选选的交互,不会编程的人也可以使用。在布局上,界面由两块独立的面板构成,所以可以拆分为两个组件: StringCalcPanelFileCalcPanel ,分别处理字符串和文件的 sha256 计算:

然后将两者拼装在一起,放入 Sha256Page 中,作为局部路由的展示组件:

```dart class Sha256Page extends StatelessWidget { const Sha256Page({super.key});

@override Widget build(BuildContext context) { return const Scaffold( body: SingleChildScrollView( padding: EdgeInsets.symmetric(vertical: 12), child: Column( children: [ StringCalcPanel(), Divider(), FileCalcPanel(), ], ), ), ); } } ```


另外,可以注意到两个面板中的右上角图标按钮是相同的视图,可以进行封装以便复用。这里定义了 BladeToolBar 组件对动作按钮进行构建,按钮的具体交互事件是由外界决定的,需要通过回调处理。我将按键行为有枚举进行管理,如下所示:

```dart enum ToolAction { copy(TolyIcon.iconcopy), clear(TolyIcon.iconclear), ; final IconData icon; const ToolAction(this.icon);

String tooltip(BuildContext context) { return switch (this) { ToolAction.copy => '复制', ToolAction.clear => '清空', }; } } ```

这样 BladeToolBar 点击了那个按钮,就可以通过回调函数访问到对应的 ToolAction 对象,关键代码如下,通过 Wrap 组件包裹图标,并将 ToolAction 元素列表映射为 TolyAction 组件:

```dart class BladeToolBar extends StatelessWidget { final ValueChanged onTap;

const BladeToolBar({super.key, required this.onTap});

@override Widget build(BuildContext context) { return Wrap( spacing: 8, children: ToolAction.values .map((action) => TolyAction( tooltip: action.tooltip(context), child: Icon(action.icon, size: 20), onTap: () => onTap(action))) .toList(), ); } } ```


面板是上中下的竖向布局,由于面板内容需要随输入更新加密结果:

  • 也就是说需要主动改变界面状态,派生 StatefulWidget 组件。
  • 其中状态量有加密结果 _result 和输入框控制器 _input
  • 状态类中监听 _input 的变化,触发解析和更新 _result 结果。
  • 可拉伸的输入面板使用 TolyUI 中的 TolyInputArea 组件。

```dart class StringCalcPanel extends StatefulWidget { const StringCalcPanel({super.key});

@override State createState() => _StringCalcPanelState(); }

class _StringCalcPanelState extends State { final TextEditingController _input = TextEditingController();

String _result = '';

@override void initState() { *input.addListener(*parser); super.initState(); }

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

void *parser() { if(*input.text.isEmpty) return; Uint8List bytes = utf8.encode(_input.text); var digest = sha256.convert(bytes); _result = digest.toString(); setState(() {}); } ```

文件计算的面板也是类似,这里就不赘述了,通过 file_picker 插件选择文件,读取数据,计算即可。


4. 大文件文件的异步计算

仔细看一下会发现,sha256.convert 是一个同步方法,这对于大文件来说是灾难性的。这就表示 1G 的文件将会被一次性读取加入内存,一方面会阻塞程序,另一方面会造成很大的内存负担。对于大文件来说,一点点地 蚕食 是非常必要的。通过源码可以看出处理 convert 方法,还有一个 startChunkedConversion 的方法:

我们可以定义内存块的大小,来一块块读取计算,如下所示,通过 async 包中的 ChunkedStreamReader 来一块块读取文件内容:

```dart import 'dart:convert'; import 'dart:io'; import 'package:async/async.dart'; import 'package:convert/convert.dart'; import 'package:crypto/crypto.dart';

Future getFileSha256(String path) async { final reader = ChunkedStreamReader(File(path).openRead()); const chunkSize = 1024 * 1024 * 2; // 2MB AccumulatorSink output = AccumulatorSink (); ByteConversionSink input = sha256.startChunkedConversion(output); try { while (true) { List chunk = await reader.readChunk(chunkSize); if (chunk.isEmpty) { break; } input.add(chunk); } } finally { reader.cancel(); } input.close(); return output.events.single; } ```


本文介绍了 Flutter 中计算 SHA256 的方式,并通过 匠心千刃 提供了交互界面。那本文就到这里,后期匠心千刃还会带来更多有趣的实用工具,敬请期待~

相关推荐
君蓦2 小时前
Flutter 本地存储与数据库的使用和优化
flutter
problc12 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人20 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos