Flutter webでFileをImageウィジェットとして表示する

はじめに

FlutterではFileをImageウィジェットとして表示する場合、

Image.file(File名),

このように表示することになりますが、この実装方法はなぜかFlutter Webではサポートされていません！

今回はFlutter WebでFileをImageウィジェットとして表示する方法を実装していきます！

実装

Flutter Webで実装する場合、FileをUint8Listに変換して、Image.memory(Uint8List)として表示するという手順で表示します！

FileをUint8Listに変換する拡張関数

import 'dart:async';
import 'dart:html' as html;
import 'dart:typed_data';

extension FileModifier on html.File {
  Future<Uint8List> asBytes() async {
    final bytesFile = Completer<List<int>>();
    final reader = html.FileReader();
    reader.onLoad.listen(
        (event) => bytesFile.complete(reader.result as FutureOr<List<int>>?));
    reader.readAsArrayBuffer(this);
    return Uint8List.fromList(await bytesFile.future);
  }
}

Flutter Webではネイティブアプリ開発のようにFileクラスを使用するためのdart.ioが使用できないため、上記のようにFileクラスをdart.htmlを用いてhtml.Fileという扱い方をします！

今回はhtml.FileクラスにextensionでasBytesを追加することで、FileからUint8Listへの変換を簡単にまとめることができました！

拡張関数（extension）についてはFlutterでextensionを使うで解説されているので、こちらをご覧下さい！

実際にFileをUint8Listに変換する場合はこのようにasBytesをして、変換したUint8ListをImage.memoryで使用します！

Uint8List uint8List = await file.asBytes();

Image.memory(uint8List),

最後に

このようにFlutter WebではFileを直接Imageウィジェットにすることはできませんが、Uint8Listに変換する手順を挟むことで表示することが可能となりました！

いつかFlutter WebでもImage.file()がサポートされるといいですね！

参考

https://pub.dev/packages/image_picker_web