Zenn
💻

[Flutter] 画像URLからFileオブジェクトを作る

2020/08/07に公開
Flutter
tech

やりたいこと

あまりないかもしれませんが、リモートにある画像ファイルのURLから File オブジェクトを取得したい場合のやり方を解説します。

やり方

まず、 File クラスに .fromUri というコンストラクタが生えているので、

final File file = File.fromUri(Uri.parse('https://via.placeholder.com/100'));

とかで行けそうな気がしてしまうかもしれませんが、ここでいう Uri はファイルシステム内での Uri なので、HTTP(S)のURIを指定しても読み込めずエラーになります。

というわけで、http パッケージを導入してまず画像をダウンロードする必要があります。

参考：Flutter: Copy image file from url to firebase - Stack Overflow

dependencies:
  flutter:
    sdk: flutter
  # ...
  http: ^0.12.2

という感じで http パッケージを導入して、

import 'package:http/http.dart';

file.writeAsBytesSync((await get('https://via.placeholder.com/300')).bodyBytes);

で File オブジェクトにダウンロードしたバイト列を書き込むことができます。

参考：flutter download an Image from url - Stack Overflow

しかし、これをやるためには何か都合のいい空のファイルを用意する必要があります。

そこで今回は file パッケージを使ってオンメモリに一時ファイルを作成することにします。

dependencies:
  flutter:
    sdk: flutter
  # ...
  http: ^0.12.2
  file: ^5.2.1

import 'package:file/memory.dart';
import 'package:http/http.dart';

File file = MemoryFileSystem().file('tmp.file');
file.writeAsBytesSync((await get('https://via.placeholder.com/300')).bodyBytes);

参考：flutter - How do I create a "fake" dart:io File from in-memory bytes? - Stack Overflow

まとめ

まとめると、リモートにある画像ファイルのURLから File オブジェクトを取得したい場合、以下のようなやり方で対応できます。

  • http パッケージと file パッケージをインストールして、以下のようなコードで、URLからダウンロードしたバイナリデータを一時ファイルに書き込んで File オブジェクトを作成
import 'package:file/memory.dart';
import 'package:http/http.dart';

File file = MemoryFileSystem().file('tmp.file');
file.writeAsBytesSync((await get('https://via.placeholder.com/300')).bodyBytes);
GitHubで編集を提案

Discussion