【Flutter】flutter_svgで表示遅延する場合の対応方法

Flutterで画像を表示させるためにsvgファイルを扱うときは、「flutter_svg」というパッケージを使用するのがオススメです。

flutter_svgを使用した際、アプリ起動直後最初のsvg画像表示が若干遅延していることに気づいたので、事前にロードとかできないのかなあと調べたら事前ロードできたので、その方法の備忘録を残します。

※本記事は以下のバージョンで動作確認しています。

flutter_svg: ^0.23.0+1

flutter_svgの使い方

flutter_svgはsvg形式のファイルを扱いやすくしてくれるパッケージです。

https://pub.dev/packages/flutter_svg

多くの人に使用している人気のパッケージね。

使い方は非常に簡単で、画像を表示したい箇所で以下のように呼び出します。

SvgPicture.asset('assets/pic/s1.svg', height: 200,)

通常使用する分にはこれで十分ですが、表示してほしいタイミングからわずかに遅れて画像が表示される事がありました。

ゲームなど、場合によっては致命的に困ることがあると思います。

flutter_svgには事前にファイルをロードしておく方法が用意されているので、それを使用することで解決可能です

precachePicture()で事前にロードしておく

以下のように「precachePicture()」を使用することで、事前にファイルをキャッシュしておくことができます。

await precachePicture(
  ExactAssetPicture(
    SvgPicture.svgStringDecoderBuilder,
    'assets/pic/s1.svg',
  ),
  null,
);

ファイルをキャッシュしておくと、SvgPicture.asset()で呼び出すときにキャッシュしていないときよりも速く画像を表示することができます。私が使用している範囲では、目視でわかる遅延は発生しなくなりました。

注意点として、svgファイルを表示する直前に呼び出すのではなく（svgを表示する画面のStatefulWidgetのinitState()などだと遅い）、svgファイルを表示する画面に遷移する前にはキャッシュしておく必要があります。

例えば以下のように、表示する画面に遷移するためのボタン押下時の処理で、遷移前にキャッシュしておくなどが考えられます。

ElevatedButton(
  onPressed: () async {
    await precachePicture(
      ExactAssetPicture(
        SvgPicture.svgStringDecoderBuilder,
        'assets/pic/s1.svg',
      ),
      null,
    );
    context.router.pushNamed('/flutter-svg-sample');
  },
  child: Text('FlutterSvg'),
)