Flutter多图拍摄插件multiple_image_camera的使用

multiple_image_camera 是一个用于在Flutter应用中从相机拍摄多张图片的插件。它支持Android和iOS平台，并提供了多种功能，如实时相机预览、切换前后摄像头、拍摄多张照片、显示拍摄的照片列表等。

功能特性

• 显示实时相机预览。
• 切换摄像头（前后摄像头）。
• 一次拍摄多张照片并将其添加到列表中。
• 提供预设动画效果。
• 相机快门振动反馈。
• 显示已拍摄并添加到列表中的图片。
• 支持手势缩放（捏合缩放）。

截图示例

安装步骤

在 pubspec.yaml 文件中添加依赖

dependencies:
  flutter:
    sdk: flutter
  multiple_image_camera: ^版本号 # 替换为最新版本号

iOS 配置

1. 确保最低支持 iOS 10 或更高版本。
2. 在 ios/Runner/Info.plist 中添加以下权限配置：

<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机以拍摄照片。</string>
<key>NSMicrophoneUsageDescription</key>
<string>我们需要访问您的麦克风以录制视频。（如果需要录音功能）</string>

Android 配置

修改 android/app/build.gradle 文件，将最低 SDK 版本设置为 21 或更高：

android {
    ...
    defaultConfig {
        ...
        minSdkVersion 21
        ...
    }
}

使用示例

以下是一个完整的示例代码，展示如何使用 multiple_image_camera 插件进行多图拍摄。

示例代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:multiple_image_camera/multiple_image_camera.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<MediaModel> images = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Image Camera Example'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            child: const Text("Capture"),
            onPressed: () async {
              MultipleImageCamera.capture(context: context).then((value) {
                setState(() {
                  images = value;
                });
              });
            },
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: images.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Image.file(File(images[index].file.path)),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

说明

1. 按钮：点击“Capture”按钮时，会调用 MultipleImageCamera.capture 方法打开相机界面进行拍照。
2. 相册展示：拍摄完成后，照片会添加到 images 列表中，并通过 ListView.builder 展示出来。

注意事项

• 确保在实际项目中根据需求调整权限描述字符串。
• 根据设备的实际硬件情况，测试前后摄像头切换及其它功能是否正常工作。
• 如果遇到任何问题，请参考插件的官方文档或GitHub仓库中的issue区获取帮助。

希望这个指南能帮助你顺利集成 multiple_image_camera 插件，并实现多图拍摄功能！