FlutterのImageウィジェットで表示できる画像の種類

FlutterのImageウィジェットがサポートしている画像種類について調べました。

画像の表示の参考は以下。
Flutterで画像を表示する方法【まとめ】

結論

dart:uiの関数instantiateImageCodecがサポートしているものになりそう。
instantiateImageCodec function
現時点(2020/05/24)でサポートしていると記載されているのは以下。

• JPEG
• PNG
• GIF
• アニメーションGIF
• WebP
• アニメーションWebP
• BMP
• WBMP

また、Imageウィジェットでは縦または横のサイズだけを指定するとアスペクト比を保って拡大・縮小されますが、その仕様もinstantiateImageCodecの説明に記載がありました。

試してみた

利用しているFlutterのバージョンは現時点最新のv1.17.1。
Windows10+Android9の実機デバッグで試します。

Windows標準のペイントで簡単につくれるJPEG系、PNG、GIF、BMPを表示してみました。
(今回はassetsに配置した画像ファイルを表示します)
また、ついでに表示に失敗したケースとして存在しないファイルを指定します。

まず、Imageウィジェット表示用クラスのソース。

class TestImage extends StatelessWidget {
  final String name;

  TestImage(this.name);

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      name,
      errorBuilder: (BuildContext context, Object error, StackTrace stackTrace) {
        return Text(error.toString());
      },
    );
  }
}

MaterialAppのhomeプロパティに指定するWidgetのソース。

class ImageTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Column(
        children: <Widget>[
          TestImage('assets/imgs/jpg.jpg'),
          TestImage('assets/imgs/jpeg.jpeg'),
          TestImage('assets/imgs/jpe.jpe'),
          TestImage('assets/imgs/png.png'),
          TestImage('assets/imgs/gif.gif'),
          TestImage('assets/imgs/bmp.bmp'),
          TestImage('assets/imgs/nothing.png'),
        ],
      ),
    );
  }
}

結果

はまったこと

1. assets/imgsに置いたので、pubspec.yamlにassets/imgs/で指定する必要があった。
2. デバッグモードで例外がブレークポイントとなってerrorBuilder実行前に止まった(デバッガが例外で実行を止めないようにした)

まとめ

問題なく画像が出ました。

その他

WebブラウザのimgタグではSVGもいけますが、Flutterではプラグインが必要そう。