Base64 是一个很“工具人”的编码：它不负责加密，只负责把二进制内容变成可打印的文本，方便在剪贴板、日志、JSON、URL 参数里来回传。

这一节的目标很明确：在文件转换助手里做一个 Base64 编码/解码 小工具，交互尽量简单，错误提示要靠谱，复制结果要顺手。

Base64编码工具的应用

Base64编码在现代应用开发中有广泛的应用。在API通信中，Base64用于传输二进制数据。在邮件系统中，Base64用于编码附件。在数据存储中，Base64用于将二进制数据转换为可打印的文本格式。

在工具页面中，Base64编码工具已经定义在工具列表中：

{'icon': Icons.vpn_key, 'title': 'Base64编码'},

上面这一行通常放在工具列表的数据源里（比如一个 List<Map> 或模型列表）。

这里我建议你把 title 作为路由/分发的关键字使用：点击卡片后，根据 title 决定弹哪个工具的对话框，后面扩展新工具时也不会到处改 if/else。

Base64编码对话框的实现

当用户点击Base64编码工具时，会显示一个对话框。这个对话框提供了输入和输出的界面：

Future<void> _showToolDetail(BuildContext context, String title) async {
  await showDialog<void>(
    context: context,
    builder: (context) => AlertDialog(
      title: Text(title),
      content: const SingleChildScrollView(child: SizedBox.shrink()),
      actions: const [],
    ),
  );
}

这里先把骨架搭起来：

• showDialog 用 await
  方便你在对话框关闭后做一些收尾逻辑（比如清空输入、打点统计）。
• SingleChildScrollView
  输入内容可能很长，不滚动的话对话框会溢出；用滚动包一下更稳。
• actions
  后面会放“关闭 / 执行 / 复制”等按钮，建议把按钮逻辑留在弹窗内部处理，外部只负责打开。

接下来把对话框内容拆开写，这样文章里也不会出现一大片代码。

输入框：支持多行、输入更自由

TextField(
  maxLines: 4,
  decoration: InputDecoration(
    hintText: '输入内容',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.r),
    ),
  ),
)

输入框我一般会做两件小事：

• 允许多行（maxLines: 4）
  Base64 字符串经常带换行，或者用户会粘贴一段 JSON/证书内容，多行能减少“粘贴就挤成一团”的体验问题。
• 边框做圆角
  属于 UI 细节，但对工具类页面来说，观感提升很明显。

输出框：只读，避免误操作

TextField(
  readOnly: true,
  maxLines: 4,
  decoration: InputDecoration(
    hintText: '输出结果',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.r),
    ),
  ),
)

输出框我会强制 readOnly: true：

• 避免用户把结果改乱
  工具类页面最怕“我改了但不知道改了”，只读能减少误会。
• 复制更明确
  配合后面的“复制”按钮，用户不会纠结“我到底要不要选中这段文本”。

底部按钮：先把交互打通

actions: [
  TextButton(
    onPressed: () => Navigator.pop(context),
    child: const Text('关闭'),
  ),
  TextButton(
    onPressed: () => Navigator.pop(context),
    child: const Text('执行'),
  ),
],

这两颗按钮是最小闭环：

• 关闭：直接退出弹窗。
• 执行：后面把编码/解码逻辑接进来后，你可以在这里触发转换，然后把结果写回输出框。

如果你打算在弹窗里支持“复制”，我更倾向于把“执行”放右侧，把“复制”放更靠右/或放在输出框旁边，避免用户误点。

Base64编码和解码的实现

Base64编码的原理是将三个字节（24位）转换为四个可打印字符（每个字符6位）。在Flutter中，我们可以使用dart:convert包提供的base64Encode和base64Decode函数：

import 'dart:convert';

这一步别省：base64Encode / base64Decode 都在 dart:convert 里。

编码通常是“字符串 -> bytes -> Base64 文本”，中间用 utf8 做桥接：

String _encodeBase64(String input) {
  try {
    final bytes = utf8.encode(input);
    return base64Encode(bytes);
  } catch (e) {
    return '编码失败: $e';
  }
}

这段实现有两个很实用的点：

• 先 utf8.encode 再 base64Encode
  这样对中文、emoji 这类非 ASCII 字符也能稳定编码。
• 直接返回错误文本
  工具类页面的定位就是“快速用”，把错误写在输出框里，用户一眼就知道问题在哪儿。

解码时要注意：Base64 解出来不一定是 UTF-8 文本。你如果直接 utf8.decode，遇到二进制文件内容就可能抛异常，所以必须兜底：

String _decodeBase64(String input) {
  try {
    final bytes = base64Decode(input);
    return utf8.decode(bytes);
  } catch (e) {
    return '解码失败: $e';
  }
}

我实际项目里经常遇到两种“看起来像 bug，其实是输入问题”的情况：

• Base64 字符串里带空格/换行
  有些系统会自动折行，你可以在执行前 trim() 一下，必要的话把中间的空白也清掉。
• 缺少 padding（=）
  有的服务端会省略 =，base64Decode 可能会报错，这时就要明确告诉用户“输入不是标准 Base64”。

双向转换的支持

Base64编码工具应该支持双向转换，即既可以进行编码，也可以进行解码。用户可以通过选择不同的模式来切换编码和解码功能。

如果你不想引入复杂组件，最简单的方式是用一个枚举保存当前模式：

enum Base64Mode { encode, decode }

模式选中后，“执行”按钮里根据 Base64Mode 分发到 _encodeBase64 或 _decodeBase64，逻辑会很清晰。

文本和文件的支持

Base64编码工具可以支持两种输入模式：文本和文件。对于文本输入，用户直接在输入框中输入内容。对于文件输入，用户可以选择一个文件，系统会对该文件进行Base64编码。

文件模式我建议你先把边界讲清楚：

• 文件很大时不要一次性读入内存
  Base64 会膨胀体积（大概 4/3），大文件直接转会卡 UI。
• 文件转 Base64 的结果往往更适合“保存到文件”
  粘贴到输出框里，体验通常不太好。

结果的处理

编码或解码得到的结果可以复制到剪贴板，或者保存到文件中。这需要使用Clipboard API和文件系统API来实现。

void _copyToClipboard(String text) {
  Clipboard.setData(ClipboardData(text: text));
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('已复制到剪贴板')),
  );
}

复制这块别只做“复制成功”，我建议你顺手补两个体验细节：

• 空结果不复制
  text.trim().isEmpty 的时候直接提示“没有可复制内容”，比复制一个空字符串更直观。
• 复制后保留弹窗
  很多用户会“复制 -> 回去改输入 -> 再执行”，复制时不关闭对话框会更符合工具使用习惯。

总结

Base64编码工具展示了如何在Flutter应用中实现数据转换功能。通过支持编码和解码两种模式，我们为用户提供了一个完整的Base64转换解决方案。

做到这里其实就已经能用了。后面你如果继续打磨，我建议优先做三件事：

• 输入清理：trim() + 必要的空白处理，减少“明明是对的但解不开”的挫败感。
• 模式切换：编码/解码一键切换，别让用户来回删内容。
• 结果去向：短内容复制，长内容保存到文件，工具会更像“项目里真的会有人用”。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net