Flutter图像选择器插件drishya_picker的使用

Flutter图像选择器插件drishya_picker的使用

这是一个Flutter包，它模仿了Facebook Messenger的图库选择器和相机功能，并将它们合并为一个组件。图库视图和相机视图也可以作为Flutter小部件使用。在底层，drishya_picker 使用了Photo Manager 和 Camera。

目录

• 安装
• 平台设置
  • Android
  • iOS
• 图库
• 相机
• 问题或需求
• 贡献者

安装

1. 添加依赖

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

dependencies:
  drishya_picker: ^latest_version

2. 安装它

你可以通过命令行来安装包：

使用 pub:

$ pub get

使用 Flutter:

$ flutter pub get

3. 导入它

现在可以在Dart代码中使用：

import 'package:drishya_picker/drishya_picker.dart';

平台设置

对于更多细节（如果需要），你可以查看 Photo Manager 和 Camera 的文档部分。

Android

将最低Android SDK版本改为21（或更高）在你的android/app/build.gradle文件中。

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。 参见生成API。

iOS

在info.plist中添加以下内容：

<key>NSPhotoLibraryUsageDescription</key>
<string>Replace with your permission description..</string>
<key>NSCameraUsageDescription</key>
<string>Replace with your permission description..</string>
<key>NSMicrophoneUsageDescription</key>
<string>Replace with your permission description..</string>

图库

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

class PickerDemo extends StatelessWidget {
 late final GalleryController controller;

 ...

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

1. GallerySetting 可用于在选择媒体时进行额外设置。

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:setting);
  }

  ...
}

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

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

1. 你也可以将 GalleryView 作为一个 Widget 使用。
2. 浏览示例应用程序以获取更深入的实现和定制。

相机

1. 使用 CameraView 的 pick() 函数来选择媒体。

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

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

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