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

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

简介

flutter_media_picker_getx 是一个用于 Flutter 的媒体选择器插件，允许用户选择多张图片或视频，并支持相机集成。

特性

• 支持多媒体选择（图片和视频）
• 单选或多选支持
• 相机集成
• 可自定义的媒体数量限制

安装

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

dependencies:
  flutter_media_picker_getx: ^0.0.6

Android权限

在 AndroidManifest.xml 中添加以下权限：

<uses-feature
    android:name="android.hardware.camera"
    android:required="false" />

<uses-permission
    android:name="android.permission.WRITE_EXTERNAL_STORAGE"
    android:maxSdkVersion="29"
    tools:replace="android:maxSdkVersion" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission
    android:name="android.permission.WRITE_EXTERNAL_STORAGE"
    android:maxSdkVersion="29" />
    
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />

iOS权限

在 Info.plist 中添加以下键值对以获取相机和照片库访问权限：

<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机来拍摄照片和视频。</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的照片库来选择照片和视频。</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>我们需要权限将照片和视频保存到您的照片库。</string>

使用方法

要使用媒体选择器，请遵循以下步骤：

1. 导入包：

   import 'package:flutter_media_picker_getx/flutter_media_picker_getx.dart';
   

2. 使用 MediaPicker 小部件打开媒体选择器：

   ElevatedButton(
     onPressed: () {
       Navigator.push(
         context,
         MaterialPageRoute(
           builder: (context) => MediaPicker(
             mediaCount: 10,
             selection: SelectionEnum.MultiMedia,
             multiSelection: true,
             cameraEnable: true,
             onPressedConfirm: myCallback,
           ),
         ),
       );
     },
     child: Text("Picker"),
   );
   

参数说明

• mediaCount: 最大可选择项目数。
• selection: 选择类型。使用 SelectionEnum.MultiMedia 选择图片和视频。
• multiSelection: 布尔值，允许多选。
• cameraEnable: 布尔值，启用选择器内的相机访问。
• onPressedConfirm: 用户确认选择时触发的回调函数。

示例代码

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

import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_media_picker_getx/flutter_media_picker_getx.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(
        title: 'Picker',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => MediaPicker(
                              mediaCount: 10,
                              selection: SelectionEnum.MultiMedia,
                              multiSelection: true,
                              cameraEnable: true,
                              onPressedConfirm: myCallback,
                            )),
                  );
                },
                child: const Text("Picker")),
          ],
        ),
      ),
    );
  }

  Future<void> myCallback({required dynamic value}) async {
    if (value is List<MediaItem>) {
      for (var media in value) {
        if (media.type == MediaType.image) {
          final file = await media.assetEntity.file;
          if (file != null) {
            if (kDebugMode) {
              print("file $file");
            }
          }
        }
      }
    } else {
      if (value is MediaItem) {
        final file = await value.assetEntity.file;
        if (file != null) {
          if (kDebugMode) {
            print("file $file");
          }
        }
      }
    }
  }
}