Flutterラボの

プレミアム会員になる

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

2021.11.18

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

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

画像1

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('表示')
          )
      )
    );
  }
}


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt