Flutter图片选择器插件images_picker_ux的使用

概述

images_picker 是一个用于从 Android 和 iOS 图库中选择图片或视频，并支持通过相机拍摄图片或视频的 Flutter 插件。此外，它还提供了裁剪、压缩等功能。

功能支持

• 从相册中选择多张图片或视频（微信风格）。
• 使用相机拍摄图片或视频。
• 自定义裁剪图片。
• 压缩图片（根据质量和大小限制）。
• 将图片或视频保存到相册或图库。
• 支持的语言包括系统语言、中文、繁体中文、英语、日语、法语、韩语、德语和越南语。

安装

iOS 配置

在 Info.plist 文件中添加以下权限描述：

<key>NSCameraUsageDescription</key>
<string>Example usage description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Example usage description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Example usage description</string>

Android 配置

在 android/app/build.gradle 中设置最低 SDK 版本为 21：

minSdkVersion 21

在 pubspec.yaml 中添加依赖：

dependencies:
  images_picker: ^1.2.10

导入插件：

import 'package:images_picker/images_picker_ux.dart';

使用方法

1. 简单选择图片

Future<void> getImage() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3, // 选择图片数量
    pickType: PickType.image, // 选择类型为图片
  );
  
  // Media 提供的属性：
  // .path: 图片路径
  // .thumbPath: 视频缩略图路径
  // .size: 文件大小（KB）
}

2. 简单选择视频

Future<void> getVideo() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3, // 选择视频数量
    pickType: PickType.video, // 选择类型为视频
  );
  
  // Media 提供的属性：
  // .path: 视频路径
  // .thumbPath: 视频缩略图路径
  // .size: 文件大小（KB）
}

3. 打开相机

Future<void> openCamera() async {
  List<Media> res = await ImagesPicker.openCamera(
    pickType: PickType.image, // 拍摄类型为图片
    maxTime: 15, // 录制视频的最大时长（秒）
  );

  // Media 提供的属性：
  // .path: 图片或视频路径
  // .thumbPath: 视频缩略图路径
  // .size: 文件大小（KB）
}

4. 添加 GIF 支持

Future<void> pickWithGif() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3,
    pickType: PickType.image,
    gif: true, // 启用 GIF 支持
  );
}

5. 设置最大视频录制时间

Future<void> pickWithMaxTime() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3,
    pickType: PickType.video,
    maxTime: 30, // 最大录制时间为 30 秒
  );
}

6. 添加裁剪功能

Future<void> pickWithCrop() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3,
    pickType: PickType.image,
    cropOpt: CropOption(
      cropType: CropType.rect, // 裁剪类型为矩形
    ),
  );
}

7. 添加压缩功能

Future<void> pickWithCompress() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3,
    pickType: PickType.image,
    quality: 0.8, // 压缩质量（仅适用于 Android）
    maxSize: 500, // 压缩后文件大小（仅适用于 iOS，单位 KB）
  );
}

8. 设置语言

Future<void> pickWithLanguage() async {
  List<Media> res = await ImagesPicker.pick(
    language: Language.Chinese, // 设置语言为中文
  );
}

9. 保存文件到相册

本地文件保存

Future<void> saveToLocal() async {
  File file = File("/path/to/your/image.png"); // 替换为实际文件路径
  bool status = await ImagesPicker.saveImageToAlbum(file);
  print(status); // 是否保存成功
}

网络文件保存

Future<void> saveFromNetwork() async {
  File file = await downloadFile("https://example.com/image.png");
  bool status = await ImagesPicker.saveImageToAlbum(file);
  print(status); // 是否保存成功
}

Future<File> downloadFile(String url) async {
  Dio dio = Dio();
  String savePath = "${Directory.systemTemp.path}/${url.split('/').last}";
  await dio.download(url, savePath);
  return File(savePath);
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 images_picker 插件进行图片和视频的选择、裁剪、保存等操作。

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:images_picker/images_picker_ux.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? path;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('images_picker 示例'),
        ),
        body: Column(
          children: [
            ElevatedButton(
              child: Text('选择图片'),
              onPressed: () async {
                List<Media>? res = await ImagesPicker.pick(
                  count: 3,
                  pickType: PickType.image,
                  language: Language.System,
                  maxTime: 30,
                  cropOpt: CropOption(
                    cropType: CropType.circle,
                  ),
                );
                if (res != null) {
                  print(res.map((e) => e.path).toList());
                  setState(() {
                    path = res[0].thumbPath;
                  });
                }
              },
            ),
            ElevatedButton(
              child: Text('打开相机'),
              onPressed: () async {
                List<Media>? res = await ImagesPicker.openCamera(
                  pickType: PickType.image,
                  quality: 0.8,
                  maxSize: 800,
                  maxTime: 15,
                );
                if (res != null) {
                  setState(() {
                    path = res[0].thumbPath;
                  });
                }
              },
            ),
            ElevatedButton(
              onPressed: () async {
                File file = await downloadFile('https://cdn.chavesgu.com/logo.png');
                bool res = await ImagesPicker.saveImageToAlbum(file);
                print(res);
              },
              child: Text('保存网络图片到相册'),
            ),
            ElevatedButton(
              onPressed: () async {
                File file = await downloadFile('https://cdn.chavesgu.com/SampleVideo.mp4');
                bool res = await ImagesPicker.saveVideoToAlbum(file);
                print(res);
              },
              child: Text('保存网络视频到相册'),
            ),
            path != null
                ? Container(
                    height: 200,
                    child: Image.file(
                      File(path!),
                      fit: BoxFit.contain,
                    ),
                  )
                : SizedBox.shrink(),
          ],
        ),
      ),
    );
  }

  Future<File> downloadFile(String url) async {
    Dio dio = Dio();
    String savePath = "${Directory.systemTemp.path}/${url.split('/').last}";
    await dio.download(url, savePath);
    print(savePath);
    return File(savePath);
  }
}

参数说明

以下是 ImagesPicker.pick 的所有参数说明：

int count = 1,
PickType pickType = PickType.image,
bool gif = true,
int maxTime = 120,
CropOption cropOpt,
int maxSize,
double quality,

ProGuard 配置

在 Android 项目中，如果遇到混淆问题，请添加以下规则：

-keep class com.luck.picture.lib.** { *; }

-dontwarn com.yalantis.ucrop**
-keep class com.yalantis.ucrop** { *; }
-keep interface com.yalantis.ucrop** { *; }