Flutter Multi Image Capture 插件的使用

Multi Image Capture 是一个用于从相机中捕获多张图片并返回图片列表的 Flutter 插件。本文将介绍如何使用这个插件，并提供完整的示例代码。

添加依赖

首先，在 pubspec.yaml 文件中的 dependencies 部分添加以下依赖：

dependencies:
  multi_image_capture: ^1.0.2  # 请根据最新版本号进行替换

然后运行命令 flutter pub get 来安装依赖。

基本实现

使用以下代码初始化 Multi Image Capture 相机界面：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multi Image Capture Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final List<File>? images = await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => MultiImageCapture(
                  title: "Camera Capture",
                  onRemoveImage: (File image) async {
                    // 可以在此处显示确认对话框，决定是否删除图片
                    // 返回 true 将从列表中删除图片
                    // 返回 false 将保持图片不变
                    return true;
                  },
                  onAddImage: (image) async {
                    // 捕获每张图片后执行的操作
                  },
                  onComplete: (List<File> finalImages) {
                    // 处理最终的图片列表
                  },
                ),
              ),
            );

            if (images != null && images.isNotEmpty) {
              // 在这里处理返回的图片列表
            }
          },
          child: const Text('Open Camera'),
        ),
      ),
    );
  }
}

参数说明

• title: 相机屏幕的工具栏标题。
• maxImages: 一次可以捕获的最大图片数量。
• preCapturedImages: 之前捕获的图片列表，用于从中恢复操作。
• themePrimaryColor: 自定义主题颜色（默认使用应用程序的主题颜色）。
• themeSecondaryColor: 自定义次要主题颜色。
• switchCameraButtonIcon: 切换相机按钮的图标。
• captureButtonIcon: 捕获按钮的图标。
• doneButtonIcon: 完成按钮的图标。
• removeImageButtonIcon: 删除图片按钮的图标。
• removeImageButtonSize: 删除图片按钮的大小。
• removeImageButtonColor: 删除图片按钮的颜色。
• imageLimitErrorMessage: 当达到最大图片捕获限制时显示的错误消息。

完整示例代码

以下是包含所有可选参数的完整示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multi Image Capture Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final List<File>? images = await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => MultiImageCapture(
                  title: "Camera Capture",
                  maxImages: 5,
                  preCapturedImages: const [],
                  themePrimaryColor: Colors.deepPurpleAccent,
                  themeSecondaryColor: Colors.white,
                  switchCameraButtonIcon: Icons.flip_camera_android,
                  captureButtonIcon: Icons.camera,
                  doneButtonIcon: Icons.done,
                  removeImageButtonIcon: Icons.remove,
                  removeImageButtonSize: 21,
                  removeImageButtonColor: Colors.amber,
                  imageLimitErrorMessage: "You cannot capture more than 5 images at a time",
                  onRemoveImage: (File image) async {
                    // 显示确认对话框，决定是否删除图片
                    return true;
                  },
                  onAddImage: (image) async {
                    // 捕获每张图片后执行的操作
                  },
                  onComplete: (List<File> finalImages) {
                    // 处理最终的图片列表
                  },
                ),
              ),
            );

            if (images != null && images.isNotEmpty) {
              // 在这里处理返回的图片列表
            }
          },
          child: const Text('Open Camera'),
        ),
      ),
    );
  }
}