Flutter中如何将相机拍摄图片保存至相册？支持批量拍摄自动保存

一、将拍摄的单张图片保存到系统相册 #

你当前的代码仅获取了相机拍摄的临时文件，ImagePicker默认不会自动把图片存入系统相册，需要借助image_gallery_saver插件实现：

1. 添加依赖
   在pubspec.yaml中加入：

dependencies:
  image_gallery_saver: ^2.0.3

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

2. 修改拍照代码，加入保存逻辑

import 'package:image_gallery_saver/image_gallery_saver.dart';

Future _takeImageFromCamera() async {
  final returnedImage = await ImagePicker().pickImage(source: ImageSource.camera);
  if (returnedImage == null) return;
  
  // 读取图片字节数据并保存到相册
  final imageBytes = await returnedImage.readAsBytes();
  await ImageGallerySaver.saveImage(imageBytes);
  
  // 更新页面预览图片
  setState(() {
    _selectedImage = File(returnedImage.path);
  });
}

3. 配置权限

• Android：在AndroidManifest.xml中添加对应权限

<!-- Android 12及以下 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- Android 13+ -->
<uses-permission android:name="android.permission.WRITE_MEDIA_IMAGES" />

• iOS：在Info.plist中添加权限说明

<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要将拍摄的图片保存到相册</string>

二、一次性拍摄多张图片并返回预览 #

ImagePicker的pickImage仅支持单张拍摄，原生相机多选拍摄功能它并未提供。要实现「连拍多张→确认→返回预览并保存相册」的流程，需要用camera插件自定义相机界面：

大致实现步骤： #

1. 添加camera依赖：

dependencies:
  camera: ^0.10.5+5

2. 自定义相机页面实现连拍逻辑：

• 初始化相机控制器
• 点击拍照按钮时，调用controller.takePicture()获取图片文件并存入列表
• 点击确认按钮后，遍历图片列表，用image_gallery_saver批量保存到相册
• 关闭相机页面，将图片列表返回给原页面用于预览

核心代码片段示例： #

// 自定义相机页面内的变量与方法
List<XFile> _capturedImages = [];
late CameraController _controller;

// 初始化相机（需在页面initState中完成）
Future _initCamera() async {
  final cameras = await availableCameras();
  _controller = CameraController(cameras[0], ResolutionPreset.medium);
  await _controller.initialize();
}

// 连拍单张
Future _captureSingleImage() async {
  final image = await _controller.takePicture();
  setState(() {
    _capturedImages.add(image);
  });
}

// 确认并批量保存
Future _confirmAndSave() async {
  for (var image in _capturedImages) {
    final bytes = await image.readAsBytes();
    await ImageGallerySaver.saveImage(bytes);
  }
  // 返回图片列表给原页面
  Navigator.pop(context, _capturedImages);
}

原页面接收返回的图片列表后，即可遍历渲染预览组件。

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