Zenn
📂

[Flutter]file_pickerをFlutterWebで使用した特に躓いたところ(備忘録)

2023/11/28に公開
Flutter
Firebase Hosting
FlutterWeb
tech

はじめに

今回実装する機能としては単純ですFlutter Webでfile_pickerを呼び出す!

躓いた点

私のコード

await FilePicker.platform.pickFiles(
        type: FileType.custom,
        allowedExtensions: ['csv', 'xlsx'],
        allowMultiple: false,
      );

(csvとxlsxのファイルだけしか選択できないようにしています)

ローカル環境で動くがデプロイ後のwebでは動作してくれない！

なぜだ...少し調べました。

file_pickerからの抜粋

WebはpickFilesしか対応していないとのこと
今回はここもクリアしている。

file_picker gitのWikiからの抜粋

Flutterのversionも今回は3.12.3を利用しているのでクリアしている。

解決策

FilePickerWebを利用する！

await FilePickerWeb.platform.pickFiles(
        type: FileType.custom,
        allowedExtensions: ['csv', 'xlsx'],
        allowMultiple: false,
      );

FilePicker からFilePickerWebにすることでデプロイ後のWebサイトでも動きました！

file_pickerライブラリのdocumentationを見ていた時にfile_picker_webの存在に気づきました。
利用したら無事解決。
Webでfile_pickerを利用するならfile_picker_webを利用するのが良さそう

Discussion