Flutter Web ✖️ Firebase Storage で画像の保存方法

Flutterと言えば、モバイルアプリって感じがしますが、
今回はFlutter Webです。

型が違う

モバイルで画像を表示する際はFile型を使用すると思いますが、
Webでは、そのFile型を使用するとエラーとなります。
なので、下記のimport文とかを誤ってインポートしたり、そのままにしているとエラーになる原因になります。

import 'dart:io';

逆にいうと、モバイルの方で下記をimportするとエラーになります

import 'dart:html';

まぁ、周知の事実ではあると思いますが、、、

Flutter Web で画像を表示する

時には、Uint8List型を使用します。
これ、なんて読むんですかね・・・？ユーイントエイトリストとか・・・？

知ってる人いたら教えてくださいmm

こいつを使用する際には、

Widget

Image.memory(uint8list)

ImageProvider型

MemoryImage(uint8list)

ですね。

まぁ、この辺はどういう原理とかは全く知らんです。興味もないですが。

Firebase Storageに突っ込む際

次は、Storageに突っ込む際のコードを書きましょうか。
先に結論↓

Future<String> getImageUrlFromStorage(
      String directory, Uint8List memory) async {
    final storageRef = _read(storageProvider).ref().child(directory);

    return await storageRef
        .putData(memory)
        .then((snapshot) => snapshot.ref.getDownloadURL());
  }

モバイルとの違いは、putFileではなくputDataを使用するところです。
これ地味な違いで見落としがちになるので気をつけてください。

putDataの引数として、Uint8List型を入れればエラーなく処理が完了します。

まぁ、ただの初見殺し

そんなに変わることもないので、ただの初見殺しって感じですね。
おわり。