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

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

dr_media_picker

Pub Package

高度集成的视频和功能丰富的dr_media_picker。

截图

Image
IOS
Image
Andoid

当前特性

  • 图片选择器

使用

确保查看 例子。

安装

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

dependencies:
  dr_media_picker: ^1.0.2

运行 flutter pub get 来获取依赖项。

基本权限设置

iOS

在 Info.plist 文件中添加以下权限描述：

<key>NSDocumentDirectoryUsageDescription</key>
<string>您的应用需要访问文档目录。</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>应用程序需要访问您的照片库。</string>

Android

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

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

基本使用

导入依赖

在 Dart 文件中导入 dr_media_picker 包：

import 'package:dr_media_picker/dr_media_picker.dart';

请求图片

请求图片并获取其路径、名称等信息：

void pickPhoto() async {
  final photoPath = await DrMediaPicker.pickPhoto();
  var path = photoPath?.path;
  var name = photoPath?.name;
  var extension = photoPath?.extension;
  var mediaType = photoPath?.mediaType;
  if (kDebugMode) {
    print("Photo Path: $path  $name  $extension $mediaType");
  }
}

iOS 自定义权限对话框

如果需要自定义 iOS 的权限对话框，可以这样做：

void pickPhoto() async {
  WidgetsFlutterBinding.ensureInitialized();
  await DrMediaPicker.config(
      pemissionMessage: "我们需要访问您的照片和视频。",
      pemissionTitle: "设置");
  runApp(const MyApp());
}

模型

定义了一个 DRPhotoResult 类来存储图片选择结果：

class DRPhotoResult {
  String path;
  String name;
  String extension;
  String mineType;
  String mediaType;
  
  DRPhotoResult({
    this.path = "",
    this.name = "",
    this.mineType = "",
    this.extension = "",
    this.mediaType = "",
  });
}

更多关于Flutter媒体选择器插件dr_media_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter媒体选择器插件dr_media_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


dr_media_picker 是一个用于在 Flutter 应用中选择媒体文件（如图片、视频等）的插件。它提供了一个简单易用的 API，允许用户从相册或相机中选择媒体文件。

以下是如何在 Flutter 项目中使用 dr_media_picker 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 dr_media_picker 的依赖：

dependencies:
  flutter:
    sdk: flutter
  dr_media_picker: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 dr_media_picker：

import 'package:dr_media_picker/dr_media_picker.dart';

3. 使用 dr_media_picker

你可以使用 DrMediaPicker 类来启动媒体选择器。以下是一个简单的示例：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<MediaFile> _selectedMedia = [];

  Future<void> _pickMedia() async {
    try {
      final List<MediaFile> media = await DrMediaPicker.pickMedia(
        maxFiles: 5, // 最多选择5个文件
        mediaType: MediaType.image, // 选择图片
      );

      setState(() {
        _selectedMedia = media;
      });
    } catch (e) {
      print("Error picking media: $e");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Media Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pickMedia,
              child: Text('Pick Media'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _selectedMedia.length,
                itemBuilder: (context, index) {
                  return Image.file(
                    File(_selectedMedia[index].path),
                    fit: BoxFit.cover,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部