Flutter多图选择插件multi_image_picker_plus的使用

multi_image_picker_plus 是一个允许在iOS和Android上显示多图选择器的Flutter插件。它基于 FishBun 和 BSImagePicker，并提供了一系列强大的功能。

关键特性

• 选择多张图片
• 原生性能
• 按相册排序的照片
• 网格视图中的拍照选项
• 限制用户可以选择的最大图片数量
• 可自定义的UI和本地化
• 缩略图支持
• 指定原始图片或缩略图的质量
• 读取图片元数据

安装配置

iOS

在 <project root>/ios/Runner/Info.plist 文件中添加以下键值：

<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的照片库以选择图片。</string>

Android

在 <project root>/android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />

<!-- For Android 13 and above -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission
    android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />

使用示例

以下是完整的示例代码，展示如何使用 multi_image_picker_plus 插件来选择多张图片：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:multi_image_picker_plus/multi_image_picker_plus.dart';
import 'package:permission_handler/permission_handler.dart';

void main() => runApp(MaterialApp(
      home: const MyApp(),
      theme: ThemeData(
        colorSchemeSeed: Colors.deepOrange,
        brightness: Brightness.dark,
      ),
    ));

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Asset> images = <Asset>[];
  String _error = 'No Error Detected';
  bool _permissionReady = false;

  static const List<Permission> _permissions = [
    Permission.storage,
    Permission.camera
  ];

  Future<void> _requestPermissions() async {
    final Map<Permission, PermissionStatus> statues =
        await _permissions.request();
    if (statues.values.every((status) => status.isGranted)) {
      _permissionReady = true;
    }
  }

  Future<void> _loadAssets() async {
    if (!_permissionReady) {
      openAppSettings();
      return;
    }

    final ColorScheme colorScheme = Theme.of(context).colorScheme;

    List<Asset> resultList = <Asset>[];
    String error = 'No Error Detected';

    try {
      resultList = await MultiImagePicker.pickImages(
        selectedAssets: images,
        iosOptions: IOSOptions(
          doneButton: UIBarButtonItem(title: 'Confirm', tintColor: colorScheme.primary),
          cancelButton: UIBarButtonItem(title: 'Cancel', tintColor: colorScheme.primary),
          albumButtonColor: colorScheme.primary,
        ),
        androidOptions: AndroidOptions(
          actionBarColor: colorScheme.surface,
          actionBarTitleColor: colorScheme.onSurface,
          statusBarColor: colorScheme.surface,
          actionBarTitle: "Select Photo",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: colorScheme.primary,
          hasCameraInPickerPage: true,
        ),
      );
    } on Exception catch (e) {
      error = e.toString();
    }

    if (!mounted) return;

    setState(() {
      images = resultList;
      _error = error;
    });
  }

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

  Widget _buildGridView() {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length, (index) {
        Asset asset = images[index];
        return AssetThumb(
          asset: asset,
          width: 300,
          height: 300,
        );
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Column(
        children: <Widget>[
          Center(child: Text('Error: $_error')),
          ElevatedButton(
            onPressed: _loadAssets,
            child: const Text("Pick images"),
          ),
          Expanded(
            child: _buildGridView(),
          )
        ],
      ),
    );
  }
}

注意事项

• 在使用插件之前，请确保已正确配置权限。
• 对于iOS设备，如果不需要获取完整元数据，可以不请求 NSPhotoLibraryUsageDescription 权限。
• 在Android 13及以上版本中，请注意媒体权限的变化。

通过上述步骤，您可以轻松集成 multi_image_picker_plus 插件到您的Flutter项目中，并实现多图选择功能。希望这个指南对您有所帮助！