Flutter资源文件选择插件flutter_asset_picker的使用

flutter_asset_picker简介

flutter_asset_picker 是一个用于从相册中选择图片、视频和音频的插件，支持iOS和Android平台。

特性

• 图片支持
• 视频支持
• 音频支持
• 支持预览和编辑图片（马赛克、旋转、缩放、涂鸦、添加文字）
• 支持屏幕旋转

示例演示

以下是该插件在不同场景下的功能展示：

图片选择界面	预览与编辑界面	编辑后的图片

使用方法

1. 引入依赖

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

dependencies:
  flutter_asset_picker: ^版本号

然后运行 flutter pub get 安装依赖。

2. 示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_asset_picker 插件选择图片并显示到界面上。

import 'dart:io';
import 'dart:math';

import 'package:flutter_asset_picker/asset_picker.dart'; // 导入插件
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:ui' as ui;

void main() {
  runApp(const MyApp());
  SystemUiOverlayStyle systemUiOverlayStyle =
      SystemUiOverlayStyle(statusBarColor: Colors.transparent);
  SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(brightness: MediaQueryData.fromWindow(ui.window).platformBrightness),
      localizationsDelegates: [
        DefaultMaterialLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
      ],
      home: const HomeWidget(),
    );
  }
}

class HomeWidget extends StatefulWidget {
  const HomeWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _HomeWidget();
  }
}

class _HomeWidget extends State<HomeWidget> {
  final List<Asset> assets = [];

  bool _scrollReverse = true;
  bool _dropDownBanner = true;
  bool _cupertinoPage = false;

  // 调用插件选择图片
  Future<void> getAllPhoto() async {
    await showAssetPickNavigationDialog(
      context: context,
      type: AssetPickerType.pictureAndVideo, // 选择图片和视频
      dropDownBannerMode: _dropDownBanner,
      isCupertinoType: _cupertinoPage,
      scrollReverse: _scrollReverse,
      photoDidSelectCallBack: (selectedAssets) {
        if (selectedAssets.isNotEmpty) {
          setState(() {
            assets.addAll(selectedAssets); // 将选中的资源添加到列表
          });
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(middle: Text('资产选择器示例')),
        child: SafeArea(
          child: Column(
            children: [
              // 按钮触发图片选择
              Center(
                child: CupertinoButton(
                  onPressed: getAllPhoto,
                  child: const Text('选择图片'),
                ),
              ),

              // 设置选项
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: Wrap(
                  spacing: 8,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text('滚动方向：'),
                        Switch(
                          value: _scrollReverse,
                          onChanged: (_) => setState(() {
                            _scrollReverse = !_scrollReverse;
                          }),
                        ),
                      ],
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text('下拉菜单模式：'),
                        Switch(
                          value: _dropDownBanner,
                          onChanged: (_) => setState(() {
                            _dropDownBanner = !_dropDownBanner;
                          }),
                        ),
                      ],
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text('Cupertino风格页面：'),
                        Switch(
                          value: _cupertinoPage,
                          onChanged: (_) => setState(() {
                            _cupertinoPage = !_cupertinoPage;
                          }),
                        ),
                      ],
                    ),
                  ],
                ),
              ),

              // 显示选中的图片列表
              const Text('图片列表'),
              Expanded(
                child: GridView.builder(
                  itemCount: assets.length,
                  padding: const EdgeInsets.all(8),
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 6,
                    mainAxisSpacing: 5,
                    crossAxisSpacing: 5,
                  ),
                  itemBuilder: (ctx, index) => LayoutBuilder(
                    builder: (context, sizeConstraint) {
                      return AssetThumbImage(
                        asset: assets[index],
                        width: (sizeConstraint.maxWidth *
                                MediaQuery.of(context).devicePixelRatio)
                            .toInt(),
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 关键类和方法说明

类 Asset

class Asset {
  String identifier; // 文件路径或媒体标识符
  int mediaType; // 媒体类型 - 0: 图片, 1: 视频, 2: 音频
  int duration; // 视频或音频时长（秒）
  String mediaUrl; // 视频或音频的本地路径
  Map<String, dynamic> editInfo; // 编辑信息
  double ratio; // 媒体宽高比
  int originalWidth; // 原始宽度
  int originalHeight; // 原始高度

  // 获取图片字节数据
  Future<Uint8List?> getImageByteData({
    int quality = 70,
    int? maxWidth,
    int? maxHeight,
    bool ignoreEditInfo = false,
  });

  // 获取指定宽高的缩略图字节数据
  Future<Uint8List?> getImageThumbByteData(int width, int height, {
    int quality = 100,
    bool needCached = false,
  });
}

小部件 AssetThumbImage

// 缩略图小部件
AssetThumbImage({
  Key? key,
  required this.asset,
  required this.width,
  this.needCache = false,
  this.index,
  this.quality = 70,
  this.boxFit = BoxFit.cover,
  this.spinner,
  this.backgroundColor,
}) : super(key: key);

小部件 AssetOriginalImage

// 原始图片小部件
AssetOriginalImage({
  Key? key,
  required this.asset,
  this.quality = 70,
  this.picSizeWidth = 600,
  this.fit = BoxFit.fill,
  int? maxWidth,
  int? maxHeight,
  this.spinner,
}) : maxWidth = maxWidth ?? 2500, maxHeight = maxHeight ?? 2500, super(key: key);

方法 showAssetPickNavigationDialog

Future showAssetPickNavigationDialog<T>({
  required BuildContext context,
  int maxNumber = 8, // 最大选择数量
  bool isCupertinoType = false, // 是否使用Cupertino风格页面
  bool scrollReverse = true, // 是否将最后的资源显示在GridView底部
  bool dropDownBannerMode = true, // 是否启用下拉菜单模式
  AssetPickerType type = AssetPickerType.picture, // 选择的媒体类型
  AssetPickedCallback? photoDidSelectCallBack, // 回调函数
});

缓存控制

// 获取缓存大小
Future<double> getAssetPickCacheSize();

// 清理缓存
Future cleanAssetPickCache() async;