Flutter资源选择插件fh_assets_picker的使用

Flutter资源选择插件fh_assets_picker的使用

简介

fh_assets_picker 是一个基于 Instagram 挑选器界面的资源选择插件。它利用了强大的 flutter_wechat_assets_picker 和 fh_assets_picker 包来处理资源选择，并且使用了一个自定义版本的 image_crop 来进行裁剪。

特性

• 🚀 支持 Instagram 布局
  • 滚动行为、动画
  • 预览、选择、取消选择操作逻辑
• ✅ 支持图像和视频（不支持视频处理）
• ✅ 可定制主题和语言
• ✅ 支持多资源选择（带最大限制）
• ✅ 单资源选择模式
• ✅ 选择后的状态恢复
• ✅ 可选择裁剪比例（默认为 1:1 和 4:5）
• ✅ 一次裁剪所有图像资源并接收进度流
• ✅ 在资源列表中添加自定义项
• ✅ 添加自定义动作按钮

使用

安装

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

dependencies:
  fh_assets_picker: ^x.y.z

确保遵循安装指南以正确设置该包。

示例代码

以下是一个简单的示例代码，展示了如何使用 fh_assets_picker 插件来选择资源。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FH Assets Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: PickersScreen(),
    );
  }
}

class PickersScreen extends StatelessWidget {
  Future<List<AssetEntity>> callPicker() async {
    final List<AssetEntity>? pickedAssets = await FHAssetsPicker.pickAssets(
      context,
      pickerConfig: FHAssetsPickerConfig(
        title: '选择资源',
      ),
      maxAssets: 10,
      onCompleted: (Stream<FHAssetsExportDetails> stream) {
        // 处理导出流结果
        // 可以使用 StreamBuilder 来显示结果
        // 或者使用 stream.listen 来手动处理数据
      },
    );
    return pickedAssets ?? [];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FH 资源选择器'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final pickedAssets = await callPicker();
            print('Picked Assets: $pickedAssets');
          },
          child: Text('选择资源'),
        ),
      ),
    );
  }
}

自定义配置

本地化

请参考 flutter_wechat_assets_picker 的文档来了解如何进行本地化设置。

主题定制

可以使用主题来定制大多数组件的外观。

// 设置选择器的主题颜色
final theme = FHAssetsPicker.themeData(Theme.of(context).primaryColor);
FHAssetsPicker.pickAssets(
  context,
  pickerConfig: FHAssetsPickerConfig(
    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: (_) {},
);

裁剪定制

可以通过设置可选的裁剪比例来定制裁剪功能。

FHAssetsPicker.pickAssets(
  context,
  pickerConfig: FHAssetsPickerConfig(
    cropDelegate: FHAssetCropDelegate(
      // 设置裁剪时使用的首选尺寸
      preferredSize: 1080,
      cropRatios: [
        // 设置可选的裁剪比例
        // 默认值为 [1/1, 4/5]，如 Instagram。
        // 如果只想禁用裁剪，可以只设置一个参数，在这种情况下，裁剪按钮将不会显示。
        // 如果裁剪比例不同于默认值，则裁剪按钮将显示选定的比例值（例如：1:1）而不是展开箭头。
      ],
    ),
  ),
  onCompleted: (_) {},
);