Flutter中如何为图片添加实际边框（保存前处理而非仅屏幕显示）

推荐使用image库，这是一个纯Dart的图片处理库，能够直接修改图片像素数据，生成带边框的图片文件，而非仅在UI层绘制临时边框。

步骤1：添加依赖 #

在pubspec.yaml中添加库依赖：

dependencies:
  image: ^4.0.17

执行flutter pub get完成依赖安装。

步骤2：示例代码 #

以下是完整的图片加边框并保存的实现代码：

import 'dart:io';
import 'package:image/image.dart' as img;

/// 给图片添加边框并保存到指定路径
/// [inputImagePath] 原始图片的本地路径
/// [outputImagePath] 带边框图片的保存路径
/// [borderWidth] 边框宽度（单位：像素）
/// [borderColor] 边框颜色，支持十六进制或img.ColorRgb8格式
Future<void> addBorderAndSaveImage(
  String inputImagePath,
  String outputImagePath, {
  int borderWidth = 20,
  int borderColor = 0xFFFFFFFF, // 默认白色边框
}) async {
  // 读取原始图片字节数据
  final inputFile = File(inputImagePath);
  final imageBytes = await inputFile.readAsBytes();

  // 解码图片
  final originalImage = img.decodeImage(imageBytes);
  if (originalImage == null) {
    throw Exception('无法解码目标图片');
  }

  // 创建新图片容器，尺寸为原图尺寸 + 2倍边框宽度
  final newWidth = originalImage.width + borderWidth * 2;
  final newHeight = originalImage.height + borderWidth * 2;
  final borderedImage = img.Image(width: newWidth, height: newHeight);

  // 填充边框颜色到新图片
  img.fill(borderedImage, borderColor);

  // 将原图绘制到新图片的中心位置
  img.copyInto(
    borderedImage,
    originalImage,
    dstX: borderWidth,
    dstY: borderWidth,
  );

  // 编码图片（这里使用PNG格式，也可替换为encodeJpg生成JPEG）
  final outputBytes = img.encodePng(borderedImage);

  // 将处理后的图片写入目标路径
  await File(outputImagePath).writeAsBytes(outputBytes);
}

调用示例 #

// 调用函数给图片添加红色边框并保存
try {
  await addBorderAndSaveImage(
    '/sdcard/Download/original.jpg', // 替换为你的原始图片本地路径
    '/sdcard/Download/bordered_image.png', // 替换为处理后图片的保存路径
    borderWidth: 30,
    borderColor: img.ColorRgb8(255, 0, 0), // 红色边框
  );
  print('图片处理完成');
} catch (e) {
  print('处理失败：$e');
}

注意事项 #

• 若处理网络图片，需先将图片下载到本地临时路径，再传入函数处理
• Android平台需申请读写外部存储权限，iOS需在Info.plist中配置相册访问权限

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