Flutter多图选择插件custom_multi_imagepicker_2的使用

custom_multi_imagepicker_2 是一个用于在 Flutter 应用中实现多图选择的插件，支持图片裁剪和压缩功能。它依赖于以下库：

• flutter_image_compress: 图片压缩。
• image_cropper: 图片裁剪。
• permission_handler: 权限管理。
• shimmer: 加载动画。
• native_device_orientation: 设备方向控制。
• flutter_cache_manager: 缓存管理。

获取开始

简单示例

import 'package:custom_multi_imagepicker/custom_multi_imagepicker.dart';

// 从相机或相册中获取图片
final images = await CustomMultiImagepicker2.cameraOrGallery(context, length: 5);
print(images.first.path);

全部选项示例

final images = await CustomMultiImagepicker2.cameraOrGallery(
  context,
  length: 5, // 最大选择图片数量
  oldImages: this.images, // 已存在的图片列表
  androidCroperUiSettings: AndroidUiSettings(), // Android 裁剪界面设置
  bottomSheetUI: true, // 是否使用底部弹出界面
  compressCroperFormat: ImageCompressFormat.jpg, // 压缩格式
  compressCroperQuality: 90, // 压缩质量
  cropStyle: CropStyle.circle, // 裁剪样式（圆形）
  croperAspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1), // 裁剪比例
  croperAspectRatioPresets: [ // 预设裁剪比例
    CropAspectRatioPreset.original,
    CropAspectRatioPreset.ratio16x9,
    CropAspectRatioPreset.square,
  ],
  enableLogInGallery: true, // 是否在相册中显示日志
  iosCroperUiSettings: IOSUiSettings(), // iOS 裁剪界面设置
  excloudImages: [], // 排除的图片路径
  folderModeGallery: true, // 相册是否以文件夹模式展示
  maxHeight: 900, // 最大高度
  maxWidth: 900, // 最大宽度
  toolbarDoneButtonText: '', // 工具栏完成按钮文本
  toolbarFolderTitle: '', // 文件夹标题
  toolbarImageTitle: '', // 图片标题
  usecameraInGallery: false, // 是否在相册中启用相机
  useComprasor: true, // 是否启用压缩
  useCropper: true, // 是否启用裁剪
);
print(images);

完整示例代码

以下是一个完整的示例代码，展示了如何使用 custom_multi_imagepicker_2 插件来选择多张图片并显示它们。

import 'package:flutter/material.dart';
import 'package:custom_multi_imagepicker/custom_multi_imagepicker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page(),
    );
  }
}

class Page extends StatefulWidget {
  Page({Key? key}) : super(key: key);

  [@override](/user/override)
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  List<ImagePickerData> images = []; // 存储选中的图片数据

  // 打开多图选择器
  pick(BuildContext context) async {
    final images = await CustomMultiImagepicker2.cameraOrGallery(
      context,
      length: 5, // 最大选择图片数量
      oldImages: this.images, // 已存在的图片
    );
    setState(() {
      this.images = images; // 更新图片列表
    });
  }

  // 构建图片预览控件
  Widget imageWidget(ImagePickerData image) {
    final width = MediaQuery.of(context).size.width / 2 - 40; // 动态计算图片宽度
    return Container(
      height: width,
      width: width,
      margin: EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Theme.of(context).primaryColor,
        image: DecorationImage(
          image: FileImage(image.file), // 显示文件图片
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('多图选择插件示例'), // 标题
      ),
      body: Wrap(
        children: images.map(imageWidget).toList(), // 显示已选图片
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.photo), // 按钮图标
        onPressed: () => pick(context), // 点击时打开多图选择器
      ),
    );
  }
}