Flutter图片选择插件image_picker_updated的使用

image picker updated

Forks

一个类似于Facebook Messenger相册选择器和相机的Flutter插件，结合为单一组件。相册视图和相机视图也可以作为Flutter小部件使用。其底层使用了[Photo Manager](https://pub.dev/packages/photo_manager)和[Camera](https://pub.dev/packages/camera)。

目录

• 安装
• 平台设置
  • Android
  • iOS
• 相册
• 相机
• 问题或需求
• 维护者

安装

1. 添加依赖

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  image_picker_updated: ^最新版本号

2. 安装依赖

可以通过以下命令安装包：

通过pub：

$ pub get

通过Flutter：

$ flutter pub get

3. 导入包

在Dart代码中导入以下包：

import 'package:image_picker_updated/image_picker_updated.dart';

平台设置

更多详细信息可以查看Photo Manager和Camera的文档。

Android

在android/app/build.gradle文件中将最低Android SDK版本设置为21或更高：

minSdkVersion 21

所需权限：

• INTERNET
• READ_EXTERNAL_STORAGE
• WRITE_EXTERNAL_STORAGE
• ACCESS_MEDIA_LOCATION

如果不需要ACCESS_MEDIA_LOCATION权限，可以参考禁用ACCESS_MEDIA_LOCATION权限部分。

Glide

Android原生使用Glide来生成图像缩略图，版本为4.11.0。

如果您的其他Android库也使用了该库且版本不同，则需要编辑Android项目的build.gradle文件：

rootProject.allprojects {

    subprojects {
        project.configurations.all {
            resolutionStrategy.eachDependency { details ->
                if (details.requested.group == 'com.github.bumptech.glide'
                        && details.requested.name.contains('glide')) {
                    details.useVersion '4.11.0'
                }
            }
        }
    }
}

如果需要使用ProGuard，可以参考Glide的ProGuard文档。

移除媒体位置权限

Android默认包含ACCESS_MEDIA_LOCATION权限。此权限从Android Q开始引入。如果您的应用不需要此权限，可以在应用的Android清单文件中添加以下节点：

<uses-permission
  android:name="android.permission.ACCESS_MEDIA_LOCATION"
  tools:node="remove"
/>

如果遇到与Glide相关的警告日志，则主项目需要实现AppGlideModule。详见Generated API。

iOS

在Info.plist文件中添加以下内容：

<key>NSPhotoLibraryUsageDescription</key>
<string>替换为您的权限描述...</string>
<key>NSCameraUsageDescription</key>
<string>替换为您的权限描述...</string>
<key>NSMicrophoneUsageDescription</key>
<string>替换为您的权限描述...</string>

相册

1. 使用SlidableGallery使相册视图可滑动，否则忽略。

class PickerDemo extends StatelessWidget {
  late final GalleryController controller;

  ...

  @override
  Widget build(BuildContext context) {
    return SlidableGallery(
      controller: controller,
      child: Scaffold(
        body: ...,
      ),
    );
  }
}

2. 使用GallerySetting为媒体选择提供更多设置。

• 使用pick()函数在控制器上选择媒体。

class PickerDemo extends StatelessWidget {
  late final GalleryController controller;

  @override
  void initState() {
    super.initState();
    controller = GalleryController();
  }

  final _gallerySetting = GallerySetting(
      enableCamera: true,
      maximumCount: 10,
      requestType: RequestType.all,
      editorSetting: EditorSetting(colors: _colors, stickers: _stickers1),
      cameraSetting: const CameraSetting(videoDuration: Duration(seconds: 15)),
      cameraTextEditorSetting: EditorSetting(
        backgrounds: _defaultBackgrounds,
        colors: _colors.take(4).toList(),
        stickers: _stickers2,
      ),
      cameraPhotoEditorSetting: EditorSetting(
        colors: _colors.skip(4).toList(),
        stickers: _stickers3,
      ),
    );

  ...

  onPressed: () async {
    final entities = await controller.pick(context, setting: _gallerySetting);
  }

  ...
}

3. 使用GalleryViewField类似于Flutter的TextField来选择媒体。（推荐方法，因为创建和销毁控制器已经处理好了）

• onChanged – 当用户选择/取消选择媒体时触发。
• onSubmitted – 当用户完成选择时触发。

GalleryViewField(
  selectedEntities: [],
  onChanged: (entity, removed) {
     ...
  },
  onSubmitted: (list) {
     ...
  },
  child: const Icon(Icons.camera),
),

4. 您还可以将GalleryView作为Widget使用。

• 浏览示例应用程序以了解更多深入的实现和自定义。

相机

1. 在CameraView上使用pick()函数选择媒体。

...
onPressed: () async {
  final entity = await CameraView.pick();
}
...

2. 使用CameraViewField类似于Flutter的TextField来选择媒体。

• onCapture – 当照片/视频捕获完成时触发。

GalleryViewField(
  onCapture: (entity) {
     ...
  },
  child: const Icon(Icons.camera),
),