iOS端末でFlutterWeb上の画像が表示されない

僕は今までAndroidのアプリを開発していたのですが、愛するGoogleがFlutterを推しているので、この機会にiOS・Webアプリ開発に触れてみようとFlutterでWebアプリ開発を試みた時に起こった事象です。

今回の事象について最初は画像表示方法が間違っていると思い少し悩んだのですが、結論としてはもっとシンプルな話でした。恐らくiOS開発に慣れている人は陥らないエラーかと思うのですが、僕と同じAndroid出身のために残します。

結論

Googleが生み出した便利な画像フォーマット「webp」をiOSはサポートしてない。
つまりFlutterでは対応していてもiOSでは表示できない。
https://github.com/fluttercandies/flutter_image_editor/issues/42

※2020/06/23時点で改善の兆し有り

iOSでもwebpを対応していくようなので、この問題は短期的なもので終わる可能性がある。嬉しい。
2020/06/23時点　Safari 14 Beta Release Notes

New Features
Added WebP image support.
https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

参考

Flutterで使える画像拡張子

下記を見る限り画像データは「JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP」が使える。
https://flutter.dev/docs/development/ui/assets-and-images

Common types of assets include static data (for example, JSON files), configuration files, icons, and images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP).

参考issue

"decode image error" with Webp images on iOS #42
https://github.com/fluttercandies/flutter_image_editor/issues/42

Add support for WebP #9857
https://github.com/flutter/flutter/issues/9857

おわりに

最初はWebp使えないと絶望したのですが、徐々に対応されているようで安心しました。
Flutterでもっとアプリ開発が便利になることを楽しみにしています！

Twitterフォローもよろしくです！

@noumi0k