Flutter媒体选择器插件fast_media_picker的使用

快速入门

fast_media_picker 是一个基于 Instagram 风格设计的媒体选择器插件。它允许用户从设备中选择图片或视频。

使用前的准备

在使用 fast_media_picker 之前，需要配置以下两个插件：

1. photo_manager: 用于管理设备上的媒体文件。
2. permission_handler: 用于请求权限。

建议您查看 示例代码 来确保正确配置。

配置 photo_manager

请阅读 photo_manager 的配置文档。

配置 permission_handler

请阅读 permission_handler 的配置文档。

使用方法

基本用法

以下是一个简单的示例，展示如何使用 fast_media_picker 选择图片：

List<AssetEntity>? result = await FastMediaPicker.pick(
    context,
    configs: FastMediaPickerConfigs(
        type: RequestType.image, // 选择类型（图片）
        pickLimit: 1, // 最多选择一张
        crossAxisCount: 4, // 网格布局的列数
    ),
);

获取选中的文件

从 AssetEntity 中获取第一个文件：

if (result == null || result.isEmpty) return;
File? image = await result.first.file;

自定义界面

您可以自定义 fast_media_picker 的授权请求界面。例如：

configs: FastMediaPickerConfigs(
    ...
    // 自定义授权请求界面
    permissionRequestWidget: DefaultPermissionRequestBody(
        titleText: '请授予访问相册的权限', // 标题
        messages: [
            PermissionRequestMessages(Icons.camera, '允许访问相机'),
        ],
        allowActionText: '允许', // 授权按钮文字
        goToSettingsActionText: '前往设置', // 设置按钮文字
    ),
),

完整示例代码

以下是一个完整的示例代码，展示了如何使用 fast_media_picker 插件：

import 'dart:io';

import 'package:fast_media_picker/fast_media_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _navigatorKey = GlobalKey<NavigatorState>();
  final _messangerKey = GlobalKey<ScaffoldMessengerState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      scaffoldMessengerKey: _messangerKey,
      title: 'fast_media_picker',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.blue,
          onPrimary: Colors.white,
        ),
      ),
      darkTheme: ThemeData(
        colorScheme: const ColorScheme.dark(
          primary: Colors.blue,
          onPrimary: Colors.white,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('fast_media_picker'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 模态弹出选择器
              TextButton(
                onPressed: () async {
                  final result = await FastMediaPicker.pick(
                    _navigatorKey.currentContext!,
                    configs: const FastMediaPickerConfigs(
                      type: RequestType.common, // 允许选择图片和视频
                      pickLimit: 1, // 最多选择一张
                      crossAxisCount: 4, // 网格布局的列数
                      childAspectRatio: 1, // 子项宽高比
                    ),
                  );
                  if (result == null) return;
                  _messangerKey.currentState!.showSnackBar(
                    SnackBar(
                      content: Text(result.toString()),
                    ),
                  );
                },
                child: const Text('Push picker - modal sheet'),
              ),
              // 故事风格选择器
              TextButton(
                onPressed: () async {
                  final result = await FastMediaPicker.pick(
                    _navigatorKey.currentContext!,
                    configs: const FastMediaPickerConfigs(
                      type: RequestType.common, // 允许选择图片和视频
                      pickLimit: 1, // 最多选择一张
                      crossAxisCount: 3, // 网格布局的列数
                      childAspectRatio: 9 / 16, // 子项宽高比
                    ),
                  );
                  if (result == null) return;
                  _messangerKey.currentState!.showSnackBar(
                    SnackBar(
                      content: Text(result.toString()),
                    ),
                  );
                },
                child: const Text('Push picker - story sheet'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}