春节已过，今天是开工的第一天。我现已一个多星期没碰过电脑了，今天上班，翻开电脑的第一件事就是想着写点什么。横竖大家都还沉浸在节后的喜悦中，还没进入作业状态，与其浪费时间，不如做些更有意义的工作。

今天就跟大家简单共享一下Flutter开发过程中经常会用到的图片和文件挑选器。

一、image_picker

一个适用于iOS和Android的Flutter插件，能够从图像库中选取图片、视频，还能够调用相机拍照新的相片。

该插件由Flutter官方供给，github的Star高达16.7k，算是比较成熟且盛行的插件了。

1、装置

flutter pub add image_picker

或者

/// pubspec.yaml文件增加依赖，并在执行flutter pub get指令
dependencies
  image_picker: ^0.8.6+1

2、运用

import 'package:image_picker/image_picker.dart';
/// 图片选取
Future<void> getImage() async {
    final XFile? file = await ImagePicker().pickImage(
      source: ImageSource.gallery, // 图库挑选
      maxWidth: 1000.0, // 设置图片最大宽度，直接紧缩了图片的体积
    );
    /// 选取图片失败file为null，要留意判断下。
    /// 获取图片途径后能够上传到服务器上
    print('${file?.path}');
}
/// 视频选取
Future<void> getImage() async {
    final XFile? file = await ImagePicker().pickVideo(
      source: ImageSource.camera, // 调用相机拍照
    );
    print('${file?.path}');
}

在项目中，调用getImage方法就会翻开图片挑选器。

Flutter图片与文件选择器

Flutter图片与文件选择器

3、特点

  • source

图片来历，ImageSource.gallery图片库中挑选，ImageSource.camera调用相机拍照新图片。

  • maxWidth

图片的最大宽度，source为ImageSource.camera时有用，等于直接的紧缩了图片的体积。假如不设置，以现在手机的相机性能，动不动就拍出了4、5M的相片，对于app来说，图片上传到服务端，将会很慢，主张设置此特点。

4、留意

iOS端假如出现闪退并且控制台报出：

The app’s Info.plist must contain an NSPhotoLibraryAddUsageDescription key with a string value explaining to the user how the app uses this data.

那么，需要翻开Xcode在Info.plist装备隐私提示语。

Flutter图片与文件选择器

二、flutter_document_picker

文档挑选器，image_picker只能挑选图片和视频，假如要挑选PDF，word文档、excel表格等就没办法了。这个时候能够运用flutter_document_picker插件，直接选取手机中的文件。

1、装置

flutter pub add flutter_document_picker

或者

/// pubspec.yaml文件增加依赖，并在执行flutter pub get指令
dependencies
  flutter_document_picker: ^5.1.0

2、运用

import 'package:image_picker/image_picker.dart';
/// 图片选取
Future<void> getDocument() async {
    FlutterDocumentPickerParams? params = FlutterDocumentPickerParams(
        // 答应选取的文件拓展类型，不加此特点则默认支撑一切类型
        allowedFileExtensions: ['pdf', 'xls', 'xlsx', 'jpg', 'png', 'jpeg'],
    );
    String? path = await FlutterDocumentPicker.openDocument(
      params: params,
    );
    print('$path');
}

Flutter图片与文件选择器

总结

image_picker插件用于图片选取，而flutter_document_picker则用于文件挑选，在日常开发中都是很常用的。在iOS中运用要留意隐私权限的装备，不然就会闪退。假如想了解更多的参数特点，能够检查官方文档：

image_picker document

flutter_document_picker document