Introduction

Flutter で WebM を表示させる仕様があって、iOS じゃ表示できないから、 ffmpeg で WebP に変換した。
普通に Image Widget で表示できたからよかったが、画面遷移して同じ画面に戻ってくると…

「あれ？アニメーションが止まってる？」

という具合。

ios

なんで？

How to resolve?

ズバリな答えがこれ。

Qiita
[Flutter] ファイルからImageウィジェットを作成したらキャッシュされて表示が更新されない - Qiita
https://qiita.com/picpie/items/65ebc94f4eea175de7ce
ファイルからImageウィジェットを作成して表示するようにしたら、内容がキャッシュされて画像ファイルを書き換えてもアプリ表示が更新されないようだ。それの検証と、キャッシュを防ぐ方法についての話。　…

上記記事はファイルに保存した画像データであるが、本質は同じ。

rootBundle からのデータ取得は非同期処理のため、build で組み込むためにはわざわざ FutureBuilder を使うなど手間がかかる。

1
2
3
4
5
6
7
8
9
10
11
12
FutureBuilder(
  future: rootBundle.load("assets/Animation_1709733079844.webp"),
  builder: (BuildContext context, AsyncSnapshot<ByteData> snapshot) {
    if (snapshot.hasData) {
      final byteData = snapshot.data!.buffer;
      final binary = byteData.asUint8List();
      return Image.memory(binary);
    } else {
      return const Spacer();
    }
  },
),

上記は自分の github のリポジトリのコードの抜粋。

GitHub
Demo/Flutter/Vanilla/11_NoCachedImageAsset at master · takuya-takeuchi/Demo
https://github.com/takuya-takeuchi/Demo/tree/master/Flutter/Vanilla/11_NoCachedImageAsset
Sample source code for Demonstration, Experiment and Test - takuya-takeuchi/Demo