【Flutter】画像を先に読み込んでおいて瞬時に表示する（ImageProvider・Image.network）

Image.networkで画像を表示するのは時間がかかるので、あらかじめ読み込んでおいて任意のタイミングで表示する方法を紹介します。

Flutterラボ - 「Flutterラボ」では動画でFlutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで誰でも気軽にFlutterが学べるコンテンツを公開しています。

precacheImageメソッドを使用して、先に画像の情報を取得しておきます。
あとは、ボタンで非表示から表示に切り替えると画像がまだ取得できていない場合は時間がかかりますが、取得済の場合はすぐに表示されます。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutterラボ'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  bool isShow = false;

  NetworkImage networkImage = const NetworkImage(
    'https://firebasestorage.googleapis.com/v0/b/flutter-labo.appspot.com/o/setting%2Fflutterlabo_sns_image.png?alt=media&token=31f2e8aa-7dae-445e-b673-63286506d661',
  );

  @override
  void didChangeDependencies() {
    precacheImage(networkImage, context);
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Center(
        child: isShow
          ? Image(image: networkImage)
          : OutlinedButton(
            onPressed: () {
              setState(() {
                isShow = true;
              });
            },
            child: const Text('表示')
          )
      )
    );
  }
}