Blog スタッフブログ

Flutter システム開発 ひとくちコードスニペット

[Flutter]画像をネットワーク経由で読み込むコードスニペット

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はFlutterで利用できるコードスニペットを紹介します。

AspectRatio(
	aspectRatio: 1/ 1,
	child: Image.network(
		"https://mixltd.jp/cms/wp-content/uploads/icon_flutter.png",
		fit: BoxFit.cover,
		loadingBuilder: (context, child, progress) {
		if (progress == null) return child;

		final expected = progress.expectedTotalBytes;
		final loaded = progress.cumulativeBytesLoaded;
		final value = (expected != null) ? loaded / expected : null;

		return Center(
			child: CircularProgressIndicator(value: value),
		);
		},
		errorBuilder: (_, __, ___) => const Icon(Icons.broken_image),
	)
);

さて、それぞれ解説していきたいと思います。

まずはImageをAspectRatioでラップすることで読み込み中の画像比率を固定化しています。これを指定しない場合ロード完了時に表示がガタつくなどの挙動が発生する場合があります。

次にloadingBuilderではロード中に進捗表示を行っています。ロードに失敗しそうな場合でもchildを返却するように注意しましょう。

errorBuilderでは読み込みに失敗した場合に表示するWidgetを指定しましょう。ここではIcons.broken_imageを表示させています。

これだけで画像をURLから読み込めるようになりました。良かったですね。

戻る 一覧へ戻る