【Flutter】precacheImageで画像を読み込んでから画面を表示する

試したこと

• FlutterでprecacheImageを使って、画像の読み込みが完了してから、画面全体を表示するようにした
  • 画像読込中は、CircularProgressIndicatorを表示させるようにした

通常の場合

画像の読み込みが遅れるので、一回文字等が表示されてから、遅れて画像が表示されてしまう

precacheImage使用後

画像が読み込まれるまで、ローディングを出すようにした

コード例

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class PreCacheImagePage extends HookConsumerWidget {
  const PreCacheImagePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isImageLoaded = useState(false);

    const image = Image(
      image: NetworkImage(
        "https://via.placeholder.com/500x500",
      ),
    );

    Future<void> cacheImage() async {
      try {
        await precacheImage(image.image, context);
      } finally {
        isImageLoaded.value = true;
      }
    }

    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        cacheImage();
      });
      return null;
    }, []);

    return Scaffold(
      appBar: AppBar(
        title: const Text('PreCache Image'),
      ),
      body: Center(
        child: isImageLoaded.value
            ? const Column(
                children: [
                  Text('PreCache Image'),
                  image,
                ],
              )
            : const CircularProgressIndicator(),
      ),
    );
  }
}