Flutter多图片选择插件camera_multi_picker的使用

Flutter多图片选择插件camera_multi_picker的使用

本README描述了该软件包。如果您将此软件包发布到pub.dev，则此README的内容将出现在您的软件包的首页上。

功能

• 在小部件中显示实时相机预览。
• 如果您想从前置摄像头拍照，可以切换摄像头。
• 一次拍摄多张照片，并将它们添加到列表中。
• 该软件包包含常见的预设动画效果。
• 该软件包还具有相机快门振动功能。
• 可以显示点击并添加到列表中的图片。
• 您可以通过捏合缩放来放大或缩小。

截图

安装

首先，在您的pubspec.yaml文件中添加camera_multi_picker作为依赖项。

iOS

• camera_multi_picker插件可以编译任何版本的iOS，但其功能需要iOS 10或更高版本。如果编译为iOS 9，请确保在使用任何camera_multi_picker插件功能之前检查设备运行的iOS版本。例如，您可以使用device_info_plus插件来检查iOS版本。
• 向ios/Runner/Info.plist添加两行：
  • 一个带有键Privacy - Camera Usage Description和使用说明。
  • 另一个带有键Privacy - Microphone Usage Description和使用说明。
• 如果编辑Info.plist为文本，请添加：

  <key>NSCameraUsageDescription</key>
  <string>your usage description here</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>your usage description here</string>
  

Android

• 在您的android/app/build.gradle文件中将最低Android SDK版本更改为21（或更高）。

  minSdkVersion 21
  

使用方法

以下是一个简单的示例Flutter应用程序，用于显示全屏相机预览并一次性拍摄多张图片。

import 'dart:io';
import 'package:camera_multi_picker/picker_resolution_preset.dart';
import 'package:flutter/material.dart';
import 'package:camera_multi_picker/camera_file.dart';
import 'package:camera_multi_picker/camera_multi_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<MediaModel> imageList = [];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        imageList: imageList,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final List<MediaModel> imageList;
  const MyHomePage({super.key, required this.imageList});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          ElevatedButton(
            child: const Text("Capture"),
            onPressed: () async {
              // 调用CameraMultiPicker.capture方法来捕获多张图片
              CameraMultiPicker.capture(
                context: context,
                maxPhotoes: 5, // 设置最大照片数
                isImagePreview: false, // 是否显示预览
                resolution: PickerResolutionPreset.max, // 设置分辨率
              ).then((value) {
                setState(() {
                  images = value; // 更新图片列表
                });
              });
            },
          ),
          Expanded(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: images.length,
                itemBuilder: (context, index) {
                  // 显示每张图片
                  return Image.file(File(images[index].file.path));
                }),
          )
        ],
      ),
    );
  }
}

示例代码

以下是完整的示例代码：

import 'dart:io';
import 'package:camera_multi_picker/picker_resolution_preset.dart';
import 'package:flutter/material.dart';
import 'package:camera_multi_picker/camera_file.dart';
import 'package:camera_multi_picker/camera_multi_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<MediaModel> imageList = [];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        imageList: imageList,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final List<MediaModel> imageList;
  const MyHomePage({super.key, required this.imageList});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          ElevatedButton(
            child: const Text("Capture"),
            onPressed: () async {
              // 调用CameraMultiPicker.capture方法来捕获多张图片
              CameraMultiPicker.capture(
                context: context,
                maxPhotoes: 5, // 设置最大照片数
                isImagePreview: false, // 是否显示预览
                resolution: PickerResolutionPreset.max, // 设置分辨率
              ).then((value) {
                setState(() {
                  images = value; // 更新图片列表
                });
              });
            },
          ),
          Expanded(
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: images.length,
                itemBuilder: (context, index) {
                  // 显示每张图片
                  return Image.file(File(images[index].file.path));
                }),
          )
        ],
      ),
    );
  }
}