Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】画像を先に読み込んでおいて瞬時に表示する(ImageProvider・Image.network)
2021.11.18
Image.networkで画像を表示するのは時間がかかるので、あらかじめ読み込んでおいて任意のタイミングで表示する方法を紹介します。
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 Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13