如何将Stack中的Widget合并到图片或视频文件中？

一、图片合并方案 #

推荐插件 #

• image：纯Dart的图片处理库，支持图层合成、格式转换等基础操作
• http：用于下载网络图片
• flutter/rendering：通过RepaintBoundary将Widget转换为图片

实现步骤 #

1. 将需要叠加的Widget（如Text）通过RepaintBoundary转换为ui.Image对象
2. 下载网络图片并解码为可编辑的图片对象
3. 使用图片处理库将Widget生成的图片叠加到原图片的指定位置
4. 将合成后的图片编码为指定格式（JPG/PNG）并保存到本地

代码示例 #

import 'dart:ui' as ui;
import 'dart:typed_data';
import 'dart:io';
import 'package:image/image.dart' as img;
import 'package:http/http.dart' as http;
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';

// 全局key用于获取RepaintBoundary的渲染对象
final repaintKey = GlobalKey();

// 构建带RepaintBoundary的Text组件
Widget buildTextOverlay() {
  return RepaintBoundary(
    key: repaintKey,
    child: Text(
      'Hello world',
      style: TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
    ),
  );
}

// 执行图片合成
Future<void> combineImageAndText() async {
  // 1. 将Text转换为ui.Image
  final renderObject = repaintKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
  if (renderObject == null) return;
  final textImage = await renderObject.toImage(pixelRatio: 3.0); // 高像素比避免模糊
  final textByteData = await textImage.toByteData(format: ui.ImageByteFormat.png);
  final textPngBytes = textByteData?.buffer.asUint8List();
  if (textPngBytes == null) return;
  final textImg = img.decodeImage(textPngBytes);

  // 2. 下载并解码原图片
  final imageResponse = await http.get(Uri.parse('https://example.com/myImage.jpg'));
  final originalImg = img.decodeImage(imageResponse.bodyBytes);
  if (originalImg == null || textImg == null) return;

  // 3. 叠加图层（居中对齐）
  final combinedImg = img.copyResize(originalImg, width: originalImg.width, height: originalImg.height);
  final offsetX = (combinedImg.width - textImg.width) ~/ 2;
  final offsetY = (combinedImg.height - textImg.height) ~/ 2;
  img.drawImage(combinedImg, textImg, dstX: offsetX, dstY: offsetY);

  // 4. 保存到本地
  final savePath = '/storage/emulated/0/combined_image.jpg';
  final file = File(savePath);
  await file.writeAsBytes(img.encodeJpg(combinedImg, quality: 90));
}

二、视频合并方案 #

推荐插件 #

• ffmpeg_kit_flutter：FFmpeg的Flutter封装，支持复杂视频编辑操作，包括水印叠加、格式转换等

实现步骤 #

1. 将需要叠加的Widget转换为透明背景的PNG图片（步骤同图片方案的Widget转图片）
2. 使用FFmpeg命令将图片作为水印叠加到视频的指定位置，设置显示时长（默认全程）
3. 输出合成后的视频文件，可保留原视频的音频轨道

代码示例 #

import 'package:ffmpeg_kit_flutter/ffmpeg_kit.dart';
import 'package:ffmpeg_kit_flutter/return_code.dart';
import 'dart:io';

// 先完成Widget转图片并保存到本地（参考图片方案的代码）
final textImagePath = '/storage/emulated/0/text_overlay.png';
final inputVideoPath = '/storage/emulated/0/input_video.mp4';
final outputVideoPath = '/storage/emulated/0/output_video.mp4';

// 执行视频合成
Future<void> combineVideoAndOverlay() async {
  // FFmpeg命令：将图片居中叠加到视频，保留原音频
  final command = '-i $inputVideoPath -i $textImagePath '
                  '-filter_complex "overlay=(W-w)/2:(H-h)/2" '
                  '-c:a copy $outputVideoPath';

  final session = await FFmpegKit.execute(command);
  final returnCode = await session.getReturnCode();

  if (ReturnCode.isSuccess(returnCode)) {
    print('视频合成成功，保存路径：$outputVideoPath');
  } else {
    final error = await session.getAllLogsAsString();
    print('视频合成失败：$error');
  }
}

关键优势 #

相比截图/录屏方案，直接通过文件层面合成的优势：

• 图片合成：分辨率可控，无UI渲染偏差，性能更优
• 视频合成：无需录制屏幕，支持长视频处理，合成质量与原视频一致，避免录屏带来的帧率/画质损失

注意事项 #

• 图片合成时，pixelRatio参数建议设为2-3，避免文字模糊
• FFmpeg需要根据平台配置：Android需在build.gradle中添加对应的ABI支持，iOS需在Info.plist中添加文件访问权限
• 视频合成属于耗时操作，建议在Isolate中执行，并显示进度提示
• 网络图片/视频需先下载到本地，再进行合成操作

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