Flutter多媒体选择插件gallery_media_picker的使用

Flutter多媒体选择插件gallery_media_picker的使用

Gallery Photo Picker 是基于 photo_widget 包的，并且与 image_picker 有相同的概念，但具有更吸引人的界面，可以从设备相册中选择图片或视频，无论是 Android 还是 iOS。

Flutter 3.3.2

特性

  • [✔] 选择图片
  • [✔] 选择视频
  • [✔] 多选图片/视频
  • [✔] 封面缩略图（预览相册中的第一张图片）
  • [❌] 从相机拍摄照片或视频

Demo (自定义视图)

自定义视图

Demo (预设视图)

预设视图

安装

  1. 该插件仅在 Android 上测试过，在你的 pubspec.yaml 文件中添加 gallery_media_picker: 0.1.0
  2. 导入 gallery_media_picker
import 'package:gallery_media_picker/gallery_media_picker.dart';

开始使用

  1. 更新 Kotlin 版本到 1.6.0 并在你的 build.gradle 文件中添加 classpath 'com.android.tools.build:gradle:7.0.4'
  2. 在 android 目录下设置 minSdkVersion 为 25 在你的 build.gradle 文件中

Android

在你的 AndroidManifest.xml 文件中添加权限：

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

iOS

在你的 Info.plist 文件中添加以下配置：

    <key>NSPhotoLibraryUsageDescription</key>
    <string>Privacy - Photo Library Usage Description</string>
    <key>NSMotionUsageDescription</key>
    <string>Motion usage description</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>NSPhotoLibraryAddUsageDescription</string>

如何使用

创建一个 GalleryMediaPicker() 小部件：

Scaffold(
    body: GalleryMediaPicker(
        /// 必填参数
        pathList: (List<PickedAssetModel> paths) { /// => (typeList<PickedAssetModel>) 返回一个包含所选媒体元数据的列表
          /// 返回的数据模型
          // PickedAssetModel(
          //    'id': String,
          //    'path': String,
          //    'type': String,
          //    'videoDuration': Duration,
          //    'createDateTime': DateTime,
          //    'latitude': double,
          //    'longitude': double,
          //    'thumbnail': Uint8List,
          //    'height': double,
          //    'width': double,
          //    'orientationHeight': int,
          //    'orientationWidth': int,
          //    'orientationSize': Size,
          //    'file': Future<File>,
          //    'modifiedDateTime': DateTime,
          //    'title': String,
          //    'size': Size,
          // )
        },

        /// 可选参数
        mediaPickerParams: MediaPickerParamsModel(
            maxPickImages: , /// (type int)
            singlePick: , /// (type bool)
            appBarColor: , /// (type Color)
            albumBackGroundColor: , /// (type Color)
            albumDividerColor: , /// (type Color)
            albumTextColor: , /// (type Color)
            appBarIconColor, /// (type Color)
            appBarTextColor: , /// (type Color)
            crossAxisCount, /// (type int)
            gridViewBackgroundColor: , /// (type Color)
            childAspectRatio, /// (type double)
            appBarLeadingWidget, /// (type Widget)
            appBarHeight: , /// (type double)
            imageBackgroundColor: , /// (type Color)
            gridPadding: /// (type EdgeInset)
            gridViewControlle:, /// (type ScrollController)
            gridViewPhysics: /// (type ScrollPhysics)
            selectedBackgroundColor: /// (type Color)
            selectedCheckColor: , /// (type Color)
            thumbnailBoxFix: , /// (type BoxFit)
            selectedCheckBackgroundColor: , /// (type Color)
            onlyImages: , /// (type bool)
            onlyVideos: , /// (type bool)
            thumbnailQuality: , /// (type int) 可选参数，你可以设置相册缩略图的质量（越高越好，但会降低性能）
        )
));

示例

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

void main() => runApp(const Example());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: GalleryMediaPicker(
            pathList: (List<PickedAssetModel> paths){}
        ),
    );
  }
}

如果你只想显示封面缩略图，请使用以下代码：

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

void main() => runApp(const Example());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        color: Colors.black,
        child: Stack(
            children: [
              Padding(
                  padding: const EdgeInsets.all(15),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Align(
                          alignment: Alignment.bottomLeft,
                          child: Container(
                              height: 100,
                              width: 100,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: Colors.black,
                                      width: 2
                                  ),
                                  borderRadius: BorderRadius.circular(10)
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(10),
                                /// 这是显示相册中的第一张图片的行
                                child: const CoverThumbnail(
                                    thumbnailQuality: 200,
                                    thumbnailFit: BoxFit.cover
                                ),
                              )
                          )
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 15,bottom: 50),
                        child: Align(
                          alignment: Alignment.bottomCenter,
                          child: Text(
                            '只显示相册中的第一张图片',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 10
                            ),
                          ),
                        ),
                      )
                    ],
                  )
              )
            ]
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何使用Flutter多媒体选择插件gallery_media_picker的代码示例。这个插件允许用户从设备的图库中选择图片和视频。

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

dependencies:
  flutter:
    sdk: flutter
  gallery_media_picker: ^latest_version  # 请替换为最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下方式使用gallery_media_picker：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gallery Media Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  Future<void> _pickMedia() async {
    final result = await GalleryMediaPicker()
        .pickMedia(context,
            type: MediaType.imageAndVideo, // 可以选择 MediaType.image, MediaType.video 或 MediaType.imageAndVideo
            maxCount: 10); // 最大选择数量

    if (result != null && result.isNotEmpty) {
      setState(() {
        _selectedMedia = result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gallery Media Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pickMedia,
              child: Text('Pick Media'),
            ),
            SizedBox(height: 20),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 4,
                  mainAxisSpacing: 4,
                ),
                itemCount: _selectedMedia.length,
                itemBuilder: (context, index) {
                  final media = _selectedMedia[index];
                  return GestureDetector(
                    onTap: () {
                      // 处理点击事件，比如预览图片或视频
                    },
                    child: Image.file(
                      File(media.path),
                      fit: BoxFit.cover,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖添加：在pubspec.yaml中添加gallery_media_picker依赖。
  2. 主应用：创建一个简单的Flutter应用，包含一个主页面MyHomePage。
  3. 状态管理：在_MyHomePageState中定义一个_selectedMedia列表来存储选中的媒体文件。
  4. 选择媒体：_pickMedia方法使用GalleryMediaPicker().pickMedia来打开图库选择界面，并处理用户选择的媒体文件。
  5. UI展示：使用GridView.builder来展示选中的媒体文件，每个媒体文件用Image.file来显示（对于视频文件，你可能需要自定义预览组件）。

请注意，这个示例仅展示了基本的图片和视频选择功能。你可能需要根据具体需求进行进一步的自定义和错误处理。

回到顶部