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フォローもよろしくです！