[Flutter] 絵文字やマテリアルアイコンからImageデータを取り出す #Flutter

ちょっとしたアプリを作るだけなのに画像リソースとか用意するのは面倒なので、Flutterでお手軽にアイコンっぽいものを表示するのに、Textウィジェットで絵文字とかIconウィジェットの定義済アイコンを使ってます。

だいたいウィジェットそのままで間に合うのですが、WebViewに定義済のマテリアルアイコン貼り付けたいとか、ListViewのアイコンに絵文字を使いたいとかで、絵文字やマテリアルアイコンからImageデータを取り出したいときがあります。それの簡単な方法を思いついたのでメモしました。もっとちゃんとした方法があるような気がしますが。（誰か教えてください）

Imageロード失敗時の代替指定を使う

ImageクラスのイメージはassetかFileかnetかmemoryから読み出すのですが、読み出しに失敗したときに表示する代替ウィジェットをerrorBuilderパラメータで指定できます。わざとロードできないファイルでイメージ構築して、errorBuilderで使いたい絵文字を表示するTextウィジェットとかIconウィジェットを指定するわけです。簡単でしょ。

マテリアルアイコン

Image texticon = Image.file(File(""), 
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) { 
    return const Icon(Icons.text_snippet_outlined);
});

絵文字

Image sadicon = Image.file(File(""), 
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) { 
    return const Text('😢');
});

ListViewで使うと次のようになります。一番上が Icon( Icons.text_snippet_outlined ) で、下２つは絵文字の「😢📁」です。

ただし欠点もあって、まずロードに失敗するので、デバッグすると本筋と関係ないところで例外起こして止まります。Image.file()だとロード結果がキャッシュされるのか停止は一回で済みますが、Image.asset()で同じことをやると何度も止まってうっとおしい。本来の使い方でないことは確かですね。

いいところはawait指定が不要なので、Widget buildやコンストラクタなど好きなとこに書けるとこです。