Flutter开发：可拖动文本叠加图片后如何通过按钮保存合成图到相册

核心逻辑说明 #

要实现Widget层的合成图导出，核心是通过离屏渲染将自定义布局的像素流导出为标准图片格式，再申请对应存储权限写入系统图库，不需要手动逐像素拼接图片和文本。该方案完全兼容你已经实现的文本拖动交互逻辑，不需要改动现有拖动代码，只要将整个可拖动区域纳入离屏渲染的包裹范围，拖动后的文本位置会自动同步到导出的图片结果中。

分步改造流程 #

• 依赖配置
  在项目的pubspec.yaml中添加两个必要功能包：
  1. 权限处理包：用于申请安卓、iOS平台的媒体存储访问权限
  2. 图库写入包：用于将导出的图片字节直接写入系统公共图库，不需要手动处理文件路径
• 离屏渲染层绑定
  给需要导出的Stack容器包裹RepaintBoundary组件，并绑定全局GlobalKey，将目标渲染区域和页面其他UI元素隔离开，避免导出多余界面内容：

  // 页面级声明全局key
  final GlobalKey _exportTargetKey = GlobalKey();
  
  // 替换原页面中的Stack容器结构
  RepaintBoundary(
    key: _exportTargetKey,
    child: Container(
      height: 300,
      width: 300,
      child: Stack(
        children: [
          // 原网络背景图组件
          // 原可拖动的HomePage文本组件
        ],
      ),
    ),
  )
  

• 悬浮按钮保存逻辑改造
  将悬浮按钮的点击回调替换为完整的导出、权限申请、写入流程：

  onPressed: () async {
    // 申请媒体存储权限
    final storagePermission = await Permission.photos.request();
    if (!storagePermission.isGranted) {
      // 权限被拒时的用户提示
      return;
    }
  
    // 拿到目标组件的渲染边界
    final RenderRepaintBoundary boundary = 
        _exportTargetKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
    
    // 按3倍像素密度导出图片，避免导出结果模糊
    final ui.Image exportedImage = await boundary.toImage(pixelRatio: 3.0);
    
    // 将渲染图转为PNG格式字节流
    final ByteData? imageByteData = 
        await exportedImage.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List imageBytes = imageByteData!.buffer.asUint8List();
  
    // 字节流直接写入系统图库
    await Gal.putImageBytes(imageBytes);
    
    // 保存完成的用户提示
  }
  

常见问题避坑 #

• 必须等网络背景图完全加载完成后再触发导出操作，否则导出的图片会出现空白背景，可通过给Image组件加加载完成回调的方式控制保存按钮的可用状态
• 安卓13+、iOS14+系统的权限申请粒度做了细分，需要在原生配置文件中单独声明媒体文件的访问权限，否则会出现权限申请不生效的问题
• 导出时的pixelRatio参数不要设置低于2，否则导出的图片分辨率太低、文字模糊

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