Flutterで、なるはやで画像をキャッシュする

Flutter標準

Flutterで画像を遅延少なく表示するために事前に読み込む機能 precacheImage がある。使用したので、メモを残します。

アプリ起動時に読み込む

void main() async {

  final binding = WidgetsFlutterBinding.ensureInitialized();

  binding.addPostFrameCallback((_) async {
    final BuildContext context = binding.renderViewElement as BuildContext;

    List images = [
      const AssetImage('assets/images/test.jpg'),
      const NetworkImage(
        'https://flutter.salon/wp-content/uploads/2022/03/IMGP7858-768x508.jpg',
      )
    ];

    for (final image in images) {
      precacheImage(
        image,
        context,
      );
    }
  });

  runApp(
    MyApp(),
  );
}

画面単位で読み込む

画面が表示されたときにすぐに表示したい場合は、didChangeDependenciesで実施する(initStateではcontextができていない)

import 'package:flutter/material.dart';

class PrecachTest extends StatefulWidget {
  const PrecachTest({Key? key}) : super(key: key);

  @override
  State createState() => _PrecachTestState();
}

class _PrecachTestState extends State {
  List images = [
    const AssetImage('assets/images/test.jpg'),
    const NetworkImage(
      'https://flutter.salon/wp-content/uploads/2022/03/IMGP7858-768x508.jpg',
    )
  ];
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  @override
  void didChangeDependencies() {
    for (var image in images) {
      precacheImage(image, context);
    }
    super.didChangeDependencies();
  }
}

参考