flutter图片选择库multi_image_picker_plus和image_picker的对比和使用解析

在Flutter应用开发中，图片选择是高频场景，无论是头像上传、相册选图还是拍照功能，都需要可靠的图片选择组件支撑。目前社区中最常用的两款组件分别是multi_image_picker_plus 和官方维护的image_picker。本文将从核心属性、API接口、使用流程、功能差异及优缺点等维度进行全面解析，帮助开发者根据业务需求精准选型。

1. 组件基础认知

在深入细节前，先明确两款组件的核心定位，为后续对比建立基础，如下：

• image_picker：Flutter官方团队维护的图片/视频选择组件，主打轻量、稳定，支持拍照和单张/多张图片选择，适配iOS和Android双平台，是官方推荐的基础选择。

• multi_image_picker_plus ：第三方开源组件，基于早期的multi_image_picker迭代优化，专注于多图选择场景，提供更丰富的选图交互和图片处理能力，扩展性更强。

2. 核心属性与API解析

两款组件的属性和API设计围绕其定位展开，image_picker侧重简洁易用，multi_image_picker_plus侧重多图场景的精细化控制。

2.1. image_picker 核心解析

image_picker的API设计极简，通过静态方法直接调用，核心属性集中在选择参数的配置上。

2.1.1. 关键属性

属性名	类型	作用	平台支持
source	ImageSource	指定图片来源，可选gallery（相册）或camera（相机）	iOS/Android
imageQuality	int (0-100)	压缩后图片质量，数值越高质量越好，仅Android支持	Android
maxWidth/maxHeight	double	压缩后图片的最大宽高，超过则等比缩放	iOS/Android
requestFullMetadata	bool	是否请求图片元数据（如拍摄时间、位置），默认false	iOS/Android
preferredCameraDevice	CameraDevice	指定相机设备，可选rear（后置）或front（前置）	iOS/Android

2.1.2. 核心API

image_picker的核心API封装在ImagePicker类中，主要提供图片和视频选择方法，支持单张和多张选择：

1. 单张图片选择：

Future<XFile?> pickImage({
  required ImageSource source,
  double? maxWidth,
  double? maxHeight,
  int? imageQuality,
  bool requestFullMetadata = false,
})

2. 多张图片选择：

Future<List<XFile>?> pickMultiImage({
  double? maxWidth,
  double? maxHeight,
  int? imageQuality,
  bool requestFullMetadata = false,
})

3. 拍照：

Future<XFile?> pickImage(
  source: ImageSource.camera, // 指定相机来源
  preferredCameraDevice: CameraDevice.front, // 可选前置相机
)

4. 获取图片临时路径 ：通过返回的XFile对象的path属性获取，可用于预览或上传。

2.2. multi_image_picker_plus 核心解析

multi_image_picker_plus专为多图场景设计，API支持批量选择、预览、编辑等功能，属性配置更细致，支持自定义选图界面风格。

2.2.1. 关键属性

属性名	类型	作用	平台支持
maxImages	int	最大选择图片数量，必填参数	iOS/Android
selectedAssets	List	已选择的图片列表，用于回显已选内容	iOS/Android
enableCamera	bool	是否显示相机入口，支持选图时直接拍照	iOS/Android
cupertinoOptions	CupertinoOptions	iOS端自定义配置（如标题、取消按钮文字）	iOS
materialOptions	MaterialOptions	Android端自定义配置（如主题色、网格列数）	Android
compressQuality	int (0-100)	图片压缩质量，双平台均支持	iOS/Android
compressSize	int	图片压缩后最大尺寸（KB），超过则进一步压缩	iOS/Android

2.2.2. 核心API

multi_image_picker_plus的核心是MultiImagePicker类，通过pickImages方法触发选图，返回Asset对象列表（包含图片详情），关键API如下：

1. 多图选择：

Future<List<Asset>> pickImages({
  required int maxImages,
  List<Asset> selectedAssets = const [],
  bool enableCamera = true,
  CupertinoOptions cupertinoOptions = const CupertinoOptions(),
  MaterialOptions materialOptions = const MaterialOptions(),
  int compressQuality = 80,
  int? compressSize,
})

2. Asset对象核心方法 ： getByteData({int? width, int? height})：获取图片字节数据，支持指定宽高缩放

3. getImageByteData()：获取原始图片字节数据

4. getThumbByteData(int width, int height)：获取缩略图字节数据

5. getMetadata()：获取图片元数据（尺寸、类型、拍摄时间等）

6. 预览已选图片 ：通过AssetPreview组件可直接预览Asset列表，无需额外处理路径。

3. 实际使用流程对比

两款组件的集成流程相似，但在多图处理和自定义场景下存在差异，以下是完整集成步骤对比。

3.1. image_picker 集成步骤

下面是一个基本例子的集成步骤：

3.1.1. 添加依赖

在pubspec.yaml中添加依赖并执行pub get：

image_picker: ^1.1.1

3.1.2. 平台配置

iOS：在Info.plist中添加权限描述：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择图片</string>
<key>NSCameraUsageDescription</key>
<string>需要访问相机以拍摄图片</string>

Android：在AndroidManifest.xml中添加权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<!-- Android 13+ 需添加读写媒体权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>

3.1.3. 核心代码实现

import 'package:image_picker/image_picker.dart';

class ImagePickerDemo extends StatefulWidget {
  @override
  _ImagePickerDemoState createState() => _ImagePickerDemoState();
}

class _ImagePickerDemoState extends State<ImagePickerDemo> {
  final ImagePicker _picker = ImagePicker();
  List<XFile> _selectedImages = [];

  // 选择多张图片
  Future<void> _pickMultiImages() async {
    final List<XFile>? images = await _picker.pickMultiImage(
      imageQuality: 80, // 压缩质量
      maxWidth: 1080, // 最大宽度
    );
    if (images != null) {
      setState(() => _selectedImages = images);
    }
  }

  // 拍照
  Future<void> _takePhoto() async {
    final XFile? photo = await _picker.pickImage(
      source: ImageSource.camera,
      preferredCameraDevice: CameraDevice.front,
    );
    if (photo != null) {
      setState(() => _selectedImages.add(photo));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ImagePicker示例")),
      body: GridView.count(
        crossAxisCount: 3,
        children: [
          // 选择按钮
          IconButton(onPressed: _pickMultiImages, icon: Icon(Icons.photo_library)),
          IconButton(onPressed: _takePhoto, icon: Icon(Icons.camera)),
          // 已选图片预览
          ..._selectedImages.map((image) => Image.file(File(image.path))),
        ],
      ),
    );
  }
}

3.2 multi_image_picker_plus 集成步骤

下面是一个基本例子的集成步骤：

3.2.1. 添加依赖

在pubspec.yaml中添加依赖并执行pub get：

multi_image_picker_plus: ^1.0.5

3.2.2. 平台配置

iOS：在Info.plist中添加相册和相机权限描述。

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择图片</string>
<key>NSCameraUsageDescription</key>
<string>需要访问相机以拍摄图片</string>

Android：在AndroidManifest.xml中添加权限，并配置主题（可选）：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
<application ... android:theme="@style/Theme.AppCompat.Light"/>

3.2.3. 核心代码实现

import 'package:multi_image_picker_plus/multi_image_picker_plus.dart';

class MultiImagePickerDemo extends StatefulWidget {
  @override
  _MultiImagePickerDemoState createState() => _MultiImagePickerDemoState();
}

class _MultiImagePickerDemoState extends State<MultiImagePickerDemo> {
  List<Asset> _selectedAssets = [];

  // 选择多图
  Future<void> _pickImages() async {
    try {
      List<Asset> resultList = await MultiImagePicker.pickImages(
        maxImages: 9, // 最多选9张
        selectedAssets: _selectedAssets, // 回显已选
        enableCamera: true, // 显示相机入口
        compressQuality: 80, // 压缩质量
        materialOptions: MaterialOptions(
          actionBarColor: "#2196F3", // 标题栏颜色
          statusBarColor: "#2196F3", // 状态栏颜色
          gridColumnCount: 4, // 网格列数
        ),
      );
      setState(() => _selectedAssets = resultList);
    } on Exception catch (e) {
      print("选图异常：$e");
    }
  }

  // 预览图片
  void _previewImages() {
    if (_selectedAssets.isNotEmpty) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => AssetPreview(
            assets: _selectedAssets,
            startIndex: 0,
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MultiImagePickerPlus示例")),
      body: Column(
        children: [
          ElevatedButton(onPressed: _pickImages, child: Text("选择图片")),
          ElevatedButton(onPressed: _previewImages, child: Text("预览图片")),
          Expanded(
            child: GridView.count(
              crossAxisCount: 4,
              children: _selectedAssets.map((asset) =>
                AssetThumb(
                  asset: asset,
                  width: 100,
                  height: 100,
                )
              ).toList(),
            ),
          ),
        ],
      ),
    );
  }
}

4. 核心差异与优缺点对比

基于上述解析，两款组件在功能、性能、扩展性等方面存在显著差异，以下从多个维度进行对比：

4.1 核心功能差异

功能点	image_picker	multi_image_picker_plus
多图选择	支持，但无选图数量实时提示	原生支持，显示已选数量和剩余可选项
选图时拍照	需单独调用相机API，无法在选图界面直接拍照	支持在选图界面内置相机入口，拍照后直接加入已选
界面自定义	无，使用系统原生选图界面	支持双平台主题、颜色、网格列数等自定义
图片预览	需通过File路径自行实现预览组件	提供AssetPreview组件，直接预览Asset列表
压缩控制	仅支持质量和宽高压缩，Android/iOS差异大	支持质量、尺寸、大小三重压缩，双平台统一
元数据获取	需开启requestFullMetadata，仅返回基础信息	原生支持，可获取尺寸、类型、拍摄时间等详细信息
视频选择	支持单视频/多视频选择	仅支持图片选择，不支持视频

4.2 优缺点对比

以下分类型维度进行对比:

4.2.1. image_picker的优缺点

• 优点： 官方维护，稳定性高，与Flutter版本兼容性好

• 轻量简洁，API学习成本低，快速集成

• 支持视频选择，满足图文+视频混合场景

• 系统原生界面，用户熟悉度高，交互一致性好

缺点： 多图选择体验差，无实时数量提示和已选回显优化

界面无法自定义，无法匹配APP整体设计风格

压缩和预览需自行处理，开发效率低

Android和iOS压缩逻辑不一致，需额外适配

4.2.2. multi_image_picker_plus的优缺点

• 优点： 多图选择体验极佳，支持已选回显、数量控制、内置相机

• 丰富的自定义能力，可匹配APP主题风格

• 提供AssetPreview、AssetThumb等组件，减少重复开发

• 统一的压缩逻辑，双平台表现一致

• Asset对象封装完善，便于图片处理和上传

缺点： 第三方维护，版本更新速度可能滞后于Flutter新版本

不支持视频选择，需额外集成其他组件

自定义配置项多，初次集成需熟悉更多参数

包体积略大于image_picker

5. 选型建议

根据业务场景的不同，两款组件的适用场景存在明显区分，建议按以下原则选型：

1. 优先选择 image_picker 的场景： 简单的单图选择或拍照场景（如头像上传）

2. 需要同时支持图片和视频选择的场景

3. 对包体积敏感，追求轻量集成的场景

4. 重视官方维护保障，需长期稳定性的场景

5. 优先选择 multi_image_picker_plus 的场景： 核心场景为多图选择（如朋友圈、相册上传）

6. 对选图界面风格有自定义需求，需匹配APP主题

7. 需要优化多图选图体验（如已选回显、内置相机）

8. 需要快速实现图片预览、缩略图展示的场景

6. 总结

image_picker和multi_image_picker_plus各有侧重：

• image_picker是官方背书的"基础款"，胜在稳定轻量、支持视频；
• multi_image_picker_plus是多图场景的"专业款"，赢在体验优化和自定义能力。

开发者在实际开发中需结合业务需求的核心痛点，权衡稳定性、功能完整性和开发效率，选择最适合的组件。若需同时支持多图和视频，可考虑两者结合使用。用multi_image_picker_plus处理多图，而image_picker补充视频选择能力。

---

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章

• 解锁flutter弹窗新姿势：dialog-flutter_smart_dialog插件解读+案例
• flutter-切换状态显示不同组件10种实现方案全解析
• flutter-详解控制组件显示的两种方式Offstage与Visibility
• flutter-使用AnimatedDefaultTextStyle实现文本动画
• flutter-使用SafeArea组件处理各机型的安全距离
• flutter-实现渐变色边框背景以及渐变色文字
• flutter-使用confetti制作炫酷纸屑爆炸粒子动画