Flutter媒体选择插件gmo_media_picker的使用
Flutter媒体选择插件gmo_media_picker的使用
gmo_media_picker
是一个用于获取图片、视频和音频的Flutter插件。它允许你在应用内从相册或相机中选择一张或多张图片,无需切换不同的提供者。此外,你还可以选择同时获取图片、视频和音频。
要求
Android
Kotlin和Gradle版本
- 将
gradle-wrapper.properties
中的Gradle版本升级到6.8.3
或最新版本但低于7.0.0
。 - 将
ext.kotlin_version
升级到1.4.32
或最新版本。
权限
必需权限:
INTERNET
READ_EXTERNAL_STORAGE
WRITE_EXTERNAL_STORAGE
ACCESS_MEDIA_LOCATION
如果不需要 ACCESS_MEDIA_LOCATION
权限,可以移除该权限:
<uses-permission
android:name="android.permission.ACCESS_MEDIA_LOCATION"
tools:node="remove"
/>
iOS
-
平台版本必须至少为
10.0
。修改ios/Podfile
并相应地更新。platform :ios, '10.0'
-
在
info.plist
中添加以下内容:<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict> <key>NSPhotoLibraryUsageDescription</key> <string>替换为您的权限描述。</string>
安装
添加到pubspec.yaml
在 pubspec.yaml
文件中添加以下依赖:
dependencies:
gmo_media_picker: 0.0.1
使用
首先,在你的Dart文件中导入 gmo_media_picker
:
import 'package:gmo_media_picker/media_picker.dart';
接下来,使用 MediaPicker.picker
方法来选择媒体文件。你可以通过设置不同的参数来定制选择器的行为。
参数说明
参数名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
isMulti | bool |
多选模式 | false |
type | RequestType |
选择器请求类型 | RequestType.common |
limit | int |
选择器可选择的最大媒体数量 | 10 |
isReview | bool |
是否在选择前预览 | true |
filterOptions | FilterOptionGroup? |
允许用户自定义媒体过滤选项 | null |
leadingBuilder | WidgetBuilder? |
特殊项的小部件构建器 | null |
routeDuration | Duration |
选择器构建页面路由过渡的时长 | const Duration(milliseconds: 300) |
mulCallback | MulCallback? |
返回选择列表项 | null |
singleCallback | SingleCallback? |
返回单个选择项 | null |
示例代码
以下是一个完整的示例代码,展示了如何使用 gmo_media_picker
插件来选择图片、视频和音频:
import 'package:flutter/material.dart';
import 'package:gmo_media_picker/media_picker.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isReview = false;
bool isMulti = false;
[@override](/user/override)
Widget build(BuildContext context) {
final themeData = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('媒体选择器示例'),
),
body: SafeArea(
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("预览"),
Switch(
value: isReview,
onChanged: (newValue) {
setState(() => isReview = newValue);
},
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("多选模式"),
Switch(
value: isMulti,
onChanged: (newValue) {
setState(() => isMulti = newValue);
},
),
],
),
MaterialButton(
color: themeData.primaryColor,
child: const Text(
'所有',
style: TextStyle(color: Colors.white),
),
onPressed: () {
picker(RequestType.all);
},
),
MaterialButton(
color: themeData.primaryColor,
child: const Text(
'图片和视频',
style: TextStyle(color: Colors.white),
),
onPressed: () {
picker(RequestType.common);
},
),
MaterialButton(
color: themeData.primaryColor,
child: const Text(
'图片选择器',
style: TextStyle(color: Colors.white),
),
onPressed: () {
picker(RequestType.image);
},
),
MaterialButton(
color: themeData.primaryColor,
child: const Text(
'视频选择器',
style: TextStyle(color: Colors.white),
),
onPressed: () {
picker(RequestType.video);
},
),
MaterialButton(
color: themeData.primaryColor,
child: const Text(
'音频选择器',
style: TextStyle(color: Colors.white),
),
onPressed: () {
picker(RequestType.audio);
},
),
],
),
),
),
);
}
void picker(RequestType type) {
GmoMediaPicker.picker(
context,
isMulti: isMulti,
type: type,
isReview: isReview,
mulCallback: (List<AssetEntity> assets) {
// 如果是多选模式,返回选择的媒体列表
},
singleCallback: (AssetEntity asset) {
// 如果是非多选模式,返回选择的单个媒体
},
);
}
}
更多关于Flutter媒体选择插件gmo_media_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复