flutter_quill插入Base64图片报错，求助解决嵌入类型不支持问题

问题场景 #

使用flutter_quill实现文本编辑器，上传本地图片转为Base64插入文档后，运行时抛出错误：

The embedable type 'image' is not supported by the provided embed constructors. You must pass your constructor function to the embedBuilders property of the QuillEditor or QuillField widgets or specify an unknownEmbedBuilder.

问题原因 #

flutter_quill默认未提供image类型嵌入内容的渲染逻辑，需要手动添加自定义的嵌入构建器来处理Base64格式的图片。

解决方案 #

1. 自定义图片嵌入构建器 #

在_EditorialPlaneScreenState类中添加处理image类型BlockEmbed的构建器，将Base64字符串转为图片组件：

// 新增自定义图片嵌入构建器
Widget _imageEmbedBuilder(BuildContext context, QuillController controller, Embed node, bool readOnly) {
  final base64Image = node.value.data as String;
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 8.0),
    child: Image.memory(
      base64Decode(base64Image),
      fit: BoxFit.contain,
    ),
  );
}

2. 在QuillEditor配置中添加构建器 #

分别在_buildEditor和_buildNoData方法的QuillEditorConfigurations里，添加embedBuilders参数：

QuillEditor.basic(
  configurations: QuillEditorConfigurations(
    controller: _controller,
    readOnly: isAdmin ? false : true,
    expands: false,
    onLaunchUrl: (String url) {
      final Uri _url = Uri.parse(url);
      openLink(_url);
    },
    placeholder: translations.addEditorialPlane,
    customStyles: const DefaultStyles(color: Colors.white),
    padding: const EdgeInsets.all(Dimension.paddingXS),
    // 添加嵌入构建器配置
    embedBuilders: [
      EmbedBuilder(
        key: const ValueKey('image'),
        builder: _imageEmbedBuilder,
      ),
    ],
  ),
  scrollController: ScrollController(),
  focusNode: FocusNode(),
)

注意事项 #

• 确保导入dart:convert包（用于base64Decode），如果未导入需添加：

import 'dart:convert';

• 构建器会自动识别BlockEmbed.image()插入的内容，完成Base64字符串到图片的解码渲染

内容的提问来源于stack exchange，提问作者joisberg