Flutter多图选择插件multiple_images_picker的使用

简介

Flutter Multiple Image Picker

Flutter 插件，用于在iOS和Android上选择多张图片。

关键特性

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

致谢

本软件使用以下开源包：

• BSImagePicker - iOS
• FishBun - Android

相关插件

image_picker - 官方Flutter图片选择器插件

支持

欢迎提交PR以改进此插件。

许可证

MIT

使用示例

以下是multiple_images_picker插件的使用示例代码：

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

import 'package:multiple_images_picker/multiple_images_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Asset> images = <Asset>[];
  String _error = '无错误检测';

  [@override](/user/override)
  void initState() {
    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,
        );
      }),
    );
  }

  Future<void> loadAssets() async {
    List<Asset> resultList = <Asset>[];
    String error = '无错误检测';

    try {
      resultList = await MultipleImagesPicker.pickImages(
        maxImages: 300, // 最大选择图片数量
        enableCamera: true, // 启用相机
        selectedAssets: images, // 已选图片
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"), // iOS样式配置
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef", // 操作栏颜色
          actionBarTitle: "示例应用", // 操作栏标题
          allViewTitle: "所有照片", // 全部照片标题
          useDetailsView: false, // 是否使用详细视图
          selectCircleStrokeColor: "#000000", // 选择圆圈的颜色
        ),
      );
    } on Exception catch (e) {
      error = e.toString();
    }

    // 如果小部件在异步平台消息飞行时从树中移除，则我们想要丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Column(
          children: <Widget>[
            Center(child: Text('错误: $_error')), // 显示错误信息
            ElevatedButton( // 按钮点击加载图片
              child: Text("选择图片"),
              onPressed: loadAssets,
            ),
            Expanded( // 扩展视图
              child: buildGridView(), // 构建网格视图
            )
          ],
        ),
      ),
    );
  }
}

说明

1. 导入必要的库：

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

2. 定义主应用类：

   void main() => runApp(MyApp());

3. 初始化状态：

   class _MyAppState extends State<MyApp> {
     List<Asset> images = <Asset>[]; // 存储选中的图片
     String _error = '无错误检测'; // 错误信息
   
     [@override](/user/override)
     void initState() {
       super.initState();
     }

4. 构建网格视图：

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

5. 加载图片：

   Future<void> loadAssets() async {
     List<Asset> resultList = <Asset>[];
     String error = '无错误检测';
   
     try {
       resultList = await MultipleImagesPicker.pickImages(
         maxImages: 300, // 最大选择图片数量
         enableCamera: true, // 启用相机
         selectedAssets: images, // 已选图片
         cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"), // iOS样式配置
         materialOptions: MaterialOptions(
           actionBarColor: "#abcdef", // 操作栏颜色
           actionBarTitle: "示例应用", // 操作栏标题
           allViewTitle: "所有照片", // 全部照片标题
           useDetailsView: false, // 是否使用详细视图
           selectCircleStrokeColor: "#000000", // 选择圆圈的颜色
         ),
       );
     } on Exception catch (e) {
       error = e.toString();
     }
   
     if (!mounted) return;
   
     setState(() {
       images = resultList;
       _error = error;
     });
   }

6. 构建UI：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
         appBar: AppBar(
           title: const Text('插件示例应用'),
         ),
         body: Column(
           children: <Widget>[
             Center(child: Text('错误: $_error')), // 显示错误信息
             ElevatedButton(
               child: Text("选择图片"),
               onPressed: loadAssets,
             ),
             Expanded(
               child: buildGridView(),
             )
           ],
         ),
       ),
     );
   }