引言

我已經(jīng)一個(gè)多星期沒碰過電腦了，今日上班，打開電腦的第一件事就是想著寫點(diǎn)什么。反正大家都還沉浸在節(jié)后的喜悅中，還沒進(jìn)入工作狀態(tài)，與其浪費(fèi)時(shí)間，不如做些更有意義的事情。

今天就跟大家簡單分享一下Flutter開發(fā)過程中經(jīng)常會用到的圖片和文件選擇器。

一、image_picker

一個(gè)適用于iOS和Android的Flutter插件，能夠從圖像庫中選取圖片、視頻，還能夠調(diào)用相機(jī)拍攝新的照片。

該插件由Flutter官方提供，github的Star高達(dá)16.7k，算是比較成熟且流行的插件了。

1、安裝

flutter pub add image_picker

或者

/// pubspec.yaml文件添加依賴，并在執(zhí)行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, // 設(shè)置圖片最大寬度，間接壓縮了圖片的體積
    );
    /// 選取圖片失敗file為null，要注意判斷下。
    /// 獲取圖片路徑后可以上傳到服務(wù)器上
    print('${file?.path}');
}
/// 視頻選取
Future<void> getImage() async {
    final XFile? file = await ImagePicker().pickVideo(
      source: ImageSource.camera, // 調(diào)用相機(jī)拍攝
    );
    print('${file?.path}');
}

在項(xiàng)目中，調(diào)用getImage方法就會打開圖片選擇器。

3、屬性

• source

圖片來源，ImageSource.gallery圖片庫中選擇，ImageSource.camera調(diào)用相機(jī)拍攝新圖片。

• maxWidth

圖片的最大寬度，source為ImageSource.camera時(shí)有用，等于間接的壓縮了圖片的體積。如果不設(shè)置，以目前手機(jī)的相機(jī)性能，動不動就拍出了4、5M的照片，對于app來說，圖片上傳到服務(wù)端，將會很慢，建議設(shè)置此屬性。

4、注意

iOS端如果出現(xiàn)閃退并且控制臺報(bào)出：

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_document_picker

文檔選擇器，image_picker只能選擇圖片和視頻，如果要選擇PDF，word文檔、excel表格等就沒辦法了。這個(gè)時(shí)候可以使用flutter_document_picker插件，直接選取手機(jī)中的文件。

1、安裝

flutter pub add flutter_document_picker

或者

/// pubspec.yaml文件添加依賴，并在執(zhí)行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(
        // 允許選取的文件拓展類型，不加此屬性則默認(rèn)支持所有類型
        allowedFileExtensions: ['pdf', 'xls', 'xlsx', 'jpg', 'png', 'jpeg'],
    );
    String? path = await FlutterDocumentPicker.openDocument(
      params: params,
    );
    print('$path');
}

總結(jié)

image_picker插件用于圖片選取，而flutter_document_picker則用于文件選擇，在日常開發(fā)中都是很常用的。在iOS中使用要注意隱私權(quán)限的配置，不然就會閃退。如果想了解更多的參數(shù)屬性，可以查看官方文檔：

image_picker document

flutter_document_picker document

以上就是Flutter圖片與文件選擇器使用實(shí)例的詳細(xì)內(nèi)容，更多關(guān)于Flutter圖片文件選擇器的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論