ImagePicker插件的用法

我们在上一章回中介绍了"如何选择视频文件"相关的内容，本章回中将介绍如何混合选择图片和视频文件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍了选择图片和视频文件相关的内容，不过是图片和视频分开单独选择的，就是说每次选择时只能单独选择图片或者单独选择视频文件，能不能在选择
文件的时候既可以选择图片又可以选择视频呢？可以！我们将在本章回中介绍如何同时选择图片和视频文件。

2. 方法与细节

包中提供了pickMedia()方法来选择图片或者视频文件，我们在接下来的小节中将介绍具体的实现方法和相关细节。

2.1 实现方法

下面是选择图片或者视频文件的实现方法，不过该方法中不包含导入包相关的操作，因为我们在前面章回中已经导入了image_picker包。

• 创建文件选择器对象，也就是包中提供的ImagePicker类的实例；
• 使用文件选择器的pickMedia()方法获取图片或者视频文件；
• 上一步中的方法将返回图片或者视频文件在本地存储中的相对路径；
• 判断文件类型，并且依据文件类型来显示图片文件或者播放视频文件；
  注意：不论是图片文件还是视频文件，获取到文件路径后都要介绍文件路径的可靠性，否则会引起程序异常。

2.2 具体细节

上面的步骤中使用了ImagePicker的pickMedia()方法，该方法返回的是Future<XFile>类型的对象，因此我们需要通过Future的then方法来获取图片或者视
频文件的路径。此外，该方法需要异步运行，因为获取图片或者视频文件路径是比较耗时的操作。

3. 示例代码

XFile? _mediaFile;

ImagePicker imagePicker = ImagePicker();

double imgWidth = 200;
double imgHeight = 400;

Future<XFile?> getMedia() async {
  var file = await imagePicker.pickMedia(
      maxHeight: imgHeight, maxWidth: imgWidth, imageQuality: 100);
  return file;
}


ElevatedButton(
  onPressed: () {
    getMedia().then((value) {
      setState(() {
        _mediaFile = value;
      });
    });
  },
  child: const Text("load multiMedia"),
),

上面的示例代码中演示了如何混合获取图片和视频文件，我们在代码中把pickMedia()方法封装成了异步方法，并且将它绑定到按钮上，这样就可以在点击按钮时发出获
取图片或者视频文件的指令，此时会打开一个文件选择器的窗口，我们可以在该窗口中以可视化操作的方式选择图片或者视频文件。代码中没有演示显示图片和播放视频文
件的方法，详细内容可以参考前面章回中的内容，因为我们刚刚介绍完，所以就不再详细演示了。不过有些细节我们还需要说明：代码中显示图片或者播放视频文件前需要
检查文件路径，文件路径 在程序最开始运 行时为null,在程序运行后，但是没有选择任何图片或者视频文件时文件路径不为空，而是为empty，这点需要特别注意。此外
因为是混合选择图片或者视频文件，所以我们需要判断文件的类型，此时使用前面章回介绍的mime包就可以。获取到文件类型后可以使用Image组件来显示图片文件或者
使用VideoPlayer组件来播放视频文件，示例代码中没有这部分代码，大家参考前面章回中的示例代码就可以。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• Flutter官方提供了image_picker包，该包以可视化操作的方式获取图片或者视频文件路径；
• 使用包中的pickMedio()方法可以获取到当前手机文件系统中图片文件或者视频文件的相对路径；
• 显示图片或者播放视频文件前需要判断文件类型，通过mime包可以获取到文件的类型；
• 显示图片或者播放视频文件前需要检查文件路径的可靠性，不然可能无法显示图片或者无法播放视频；
  看官们，与"如何混合选择图片和视频文件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!