💾

FlutterのFileとXFileとの違い

2022/12/18に公開

小ネタ記事です。Flutterで画像やファイルを扱うときに型やClassとしてXFileFileを使っている記事を見ますが、XFileFileとを相互変換しているかのような記事を見かけたり、そもそもXFileって何?Fileと何が違うの?と混乱した記憶があったので、改めて整理して紹介します。

なお、この記事はFlutter Advent Calendar 2022の17日目の記事になります。

File

File Classはdart.ioライブラリで提供されているファイルシステム上のファイルへの参照、読み込みや書き込みをするためのClassです。

https://api.dart.dev/stable/2.18.6/dart-io/File-class.html

なお、XFileとの大きな違いとして、大元となるdart.ioライブラリが非Webアプリケーションでのみサポートされているため、Webアプリケーションでは使えません。

Important: Browser-based apps can't use this library. Only the following can import and use the dart:io library:
https://api.dart.dev/stable/2.18.6/dart-io/dart-io-library.html

Fileの扱い方

Fileのサンプルは以下のとおりです。後述するXFileと記述は基本的に同じですが、ファイルへの書き込み(writeAsString)や、作成(watch)まで、ファイルを操作するための機能が網羅的にサポートされています。

import 'dart:io';

final filename = 'file.txt';
var file = await File(filename).writeAsString('some content');

参考

https://docs.flutter.dev/cookbook/persistence/reading-writing-files

XFile

XFile Classはクロスプラットフォーム用に抽象化されたClassです。
選択されたファイルのbyteデータ、プラットフォーム依存のpathをラップした形式になります。
Fileと違って、ファイルの作成や直接書き込みのメソッドは提供されていません。全てのプラットフォームでサポートされているがゆえの制限です。

https://api.flutter.dev/flutter/dart-io/File-class.html

pub.devの中でも人気なimage_pickerも、返されるデータがXFileであったり、最近よく使われている形式です。
ちなみに、XFileはcross_fileのimportが必須でしたが、Flutter2.8以降では明示的なimportが不要になりました。

https://pub.dev/documentation/cross_file/latest/

XFileの扱い方

XFileもFileと同様な使い方が可能です。

final filename = 'file.txt';
var file = await XFile(filename).readAsBytes();

画像として扱う場合は、File型をreadAsBytesメソッドで、いったんUint8List型に変換し、
それをdecodeImageメソッドなどで、Image型に変換します。

final Uint8List bytes = await XFile(filename).readAsBytes();

また、byteデータに変換することでhttp.MultipartFileのPOSTデータとして扱えます。

http.MultipartFile.fromBytes(
	'file',
	bytes,
	filename: file.name,
)

Discussion