Flutter图片选择器插件instapicker的使用
Flutter图片选择器插件instapicker的使用
📷 Instagram Assets Picker
功能介绍
Instagram Assets Picker
是一个基于 Instagram 图片选择器界面的图片(支持视频)选择器插件。它利用了强大的 flutter_wechat_assets_picker
包来处理选择逻辑,并且使用了一个自定义版本的 image_crop
来实现裁剪功能。
主要特性:
- ✅ Instagram布局
- 滚动行为和动画效果。
- 预览、选择和取消选择的逻辑。
- ✅ 支持图片和视频
- (但不支持视频处理)
- ✅ 主题和语言定制化
- ✅ 多资产选择(最大限制)
- ✅ 单资产选择模式
- ✅ 恢复选择器弹出后的状态
- ✅ 设置裁剪比例
- ✅ 批量裁剪图片并接收进度流
- ✅ 在资产列表中添加自定义项目
- ✅ 添加自定义操作按钮
🖼️ 截图
布局和滚动 | 裁剪 |
---|---|
![]() |
![]() |
📝 安装
在项目的 pubspec.yaml
文件中添加以下依赖:
insta_assets_picker: ^3.0.0-dev.1
🚨 注意事项
由于此插件是 flutter_wechat_assets_picker
的自定义委托,因此你必须遵循以下安装指南:
👀 使用方法
更多详细信息可以查看 示例代码。
示例代码
import 'package:flutter/material.dart';
import 'package:insta_assets_picker/insta_assets_picker.dart';
Future<List<AssetEntity>?> callPicker() => InstaAssetPicker.pickAssets(
context,
pickerConfig: InstaAssetPickerConfig(
title: '选择资产',
),
maxAssets: 10, // 最多选择10个资产
onCompleted: (Stream<InstaAssetsExportDetails> stream) {
// 处理裁剪流结果
// 可以使用 StreamBuilder 或手动监听数据
// - 在同一页面关闭选择器(closeOnComplete=true)
// - 发送到另一个页面(closeOnComplete=false)
// 或者手动在状态管理器中处理数据
},
);
InstaAssetsExportDetails
字段说明:
名称 | 类型 | 描述 |
---|---|---|
data | List<InstaAssetsExportData> |
包含选中的资产、裁剪参数及可能的裁剪文件 |
selectedAssets | List<AssetEntity> |
未裁剪的选中资产 |
aspectRatio | double |
选中的裁剪比例(例如 1 或 4/5) |
progress | double |
导出进度(范围为 0 到 1) |
InstaAssetsExportData
字段说明:
名称 | 类型 | 描述 |
---|---|---|
croppedFile | File? |
裁剪后的文件,可能为 null(视频或跳过裁剪时) |
selectedData | InstaAssetsCropData |
选中的资产及其裁剪参数(区域、缩放比等) |
🎨 选择器配置
请参考 flutter_wechat_assets_picker
的文档:AssetPickerConfig。
🔠 本地化
请参考 flutter_wechat_assets_picker
的文档:Localizations。
🌈 主题定制化
可以通过主题对选择器中的大多数组件进行定制。
final theme = InstaAssetPicker.themeData(Theme.of(context).primaryColor);
InstaAssetPicker.pickAssets(
context,
pickerConfig: InstaAssetPickerConfig(
pickerTheme: theme.copyWith(
canvasColor: Colors.black, // 背景颜色
splashColor: Colors.grey, // 点击时的溅墨效果
colorScheme: theme.colorScheme.copyWith(
background: Colors.black87, // 相册列表背景色
),
appBarTheme: theme.appBarTheme.copyWith(
backgroundColor: Colors.black, // 应用栏背景色
titleTextStyle: Theme.of(context)
.appBarTheme
.titleTextStyle
?.copyWith(color: Colors.white), // 修改应用栏标题样式
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: Colors.blue, // 按钮文字颜色
disabledForegroundColor: Colors.red, // 禁用状态下文字颜色
),
),
),
),
onCompleted: (_) {},
);
🛠️ 裁剪定制化
你可以设置裁剪比例的列表以及裁剪资产的首选尺寸。
InstaAssetPicker.pickAssets(
context,
pickerConfig: InstaAssetPickerConfig(
cropDelegate: InstaAssetCropDelegate(
// 设置裁剪时使用的首选尺寸
preferredSize: 1080,
cropRatios: [
// 允许设置可选的裁剪比例,默认为 [1/1, 4/5]
// 如果只设置一个值,则裁剪按钮将不会显示
// 如果裁剪比例不同于默认值,裁剪按钮会显示选定的比例值(如 1:1)
],
),
),
onCompleted: (_) {},
);
1 回复