在自定义视频选择库_如何快速创建自定义媒体选择器以从图库中选择照片和视频...

在自定义视频选择库

So you’re writing a Flutter app and now you want to allow the user to select photos and/or videos from their device? You don’t want to use the device’s default image picker because you think it’s lame?

因此，您正在编写Flutter应用程序，现在要允许用户从其设备中选择照片和/或视频吗？ 您不想使用设备的默认图像选择器，因为您认为它很la脚？

Great news, this is the tutorial for you!

好消息，这是给您的教程！

Prerequisites:

先决条件：

In order to create a custom media selector we must first find a way to access the images and videos stored on the device. Luckily, there is an amazing Flutter package that exists for doing this! The photo_manager package will allow us to read all of the media stored on the device (iOS and Android), and access important data from each image or video that we can use to create the UI.

为了创建自定义媒体选择器，我们必须首先找到一种访问存储在设备上的图像和视频的方法。 幸运的是，有一个很棒的 Flutter软件包可以做到这一点！ 使用photo_manager包，我们可以读取设备(iOS和Android)上存储的所有媒体，并访问可用于创建UI的每个图像或视频中的重要数据。

At the time of writing the latest version of photo_manager is 0.5.0. Please refer to the photo_manager pub page and use the current latest version for the best experience.

在撰写本文时，photo_manager的最新版本是0.5.0。 请参考photo_manager pub页面，并使用最新版本以获得最佳体验。

Like any other package in Flutter, adding it is as simple as adding the dependency in the pubspec.yaml file.

像Flutter中的任何其他软件包一样，添加它就像在pubspec.yaml文件中添加依赖项一样简单。

After adding the dependency run this command in the project’s working directory to download the package (Some IDE’s will run this automatically):

添加依赖项后，在项目的工作目录中运行以下命令以下载软件包(某些IDE会自动运行该软件包)：

flutter packages get

Now let’s start coding!

现在开始编码！

I’m going to iterate the code as we go along so that you can follow along and understand how all of the parts work together.

我们将遍历代码，以便您可以继续学习并理解所有部分如何协同工作。

If you just want the final code, it’s at the bottom of this article :)

如果您只想要最终的代码，则在本文的底部：)

Import the photo_manager package

导入photo_manager包

The first step to use the package is importing it into our dart file. You do this by adding the following import statement at the top of the dart file:

使用该软件包的第一步是将其导入到我们的dart文件中。 为此，您可以在dart文件顶部添加以下import语句：

import 'package:photo_manager/photo_manager.dart';

List albums from the device

列出设备中的相册

Create a new stateful widget, I’ll call it “MediaGrid”, which will contain the logic for this.

创建一个新的有状态小部件，我将其称为“ MediaGrid”，其中将包含此逻辑。

Inside of the MediaGrid widget we need to request device permissions to access the device’s storage (to retrieve the photos and videos). I will create a new method that I can call to fetch the media, aptly named “_fetchNewMedia”. Inside of the _fetchNewMedia method I will request storage permissions, and then access the device’s “Recent” or “All” album and read the first twenty files.

在MediaGrid小部件内部，我们需要请求设备权限以访问设备的存储(以检索照片和视频)。 我将创建一个可以调用以提取媒体的新方法，恰当地命名为“ _fetchNewMedia”。 在_fetchNewMedia方法中，我将请求存储权限，然后访问设备的“最近”或“全部”相册并读取前20个文件。

We can start by calling getAssetPathList and printing the result to see the list of albums on the device.

我们可以先调用getAssetPathList并打印结果以查看设备上的相册列表。

List<AssetPathEntity> albums = await PhotoManager.getAssetPathList();print(albums);

If you want to try this on your device, the full main.dart file looks like this right now:

如果要在设备上尝试此操作，则完整的main.dart文件现在如下所示：

import 'package:flutter/material.dart';
import 'package:photo_manager/photo_manager.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
       
  // This widget is the root of your application.@override
  Widget build(BuildContext context) {
       
    return MaterialApp(
      title: 'Media Picker Example',
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.red,
      ),
      home: MyHomePage(title: 'Media Picker Example App'),
    );
  }
}class MyHomePage extends StatefulWidget {
       
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;@override
  _MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {
       @override
  Widget build(BuildContext context) {
       
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MediaGrid(),
    );
  }
}class MediaGrid extends StatefulWidget {