Flutter アプリでインターネットから画像を表示する方法について触れています。
1.インターネットからの画像表示
Flutter では、Image ウィジェットを使って画像を表示します。
特に、インターネット上の画像を表示したい場合は、Image.network() コンストラクタを使用します。
(例えば、以下の様に書くと、指定した URL の画像が表示されます。)
Image.network() コンストラクタを使用して、インターネット上の画像を表示する(例):
Image.network('https://picsum.photos/250?image=9'),
2.ボーナス: アニメーションGIF
Image ウィジェットは、通常の画像だけでなく、アニメーション GIF もサポートしています。
これは、動く画像(アニメーション)を簡単に表示できるため、非常に便利です。
(例えば、以下のコードでアニメーション GIF を表示できます。)
同様に、アニメーション GIF を表示する(例):
Image.network(
'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif');
3.フェードイン効果を持つプレースホルダー付き画像
通常の Image.network コンストラクタでは、画像の読み込み後にフェードインするなどの高度な機能はサポートされていません。画像が読み込まれる前にプレースホルダー(読み込み中に表示する一時的な画像)を表示し、その後フェードインさせるような機能を実装したい場合は、Fade in images with a placeholder のページを参照すると良いです。
4.インタラクティブな例
インターネットから画像を読み込み表示する(例):
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
var title = 'Web Images';
return MaterialApp(
title: title, //MaterialAppのタイトルを設定
home: Scaffold(
appBar: AppBar(
title: Text(title), //AppBarにタイトルを設定
),
//インターネットから画像を読み込み表示する
//これは、インターネット上の画像を指定したURLから
//読み込んで表示するための行です。
//Image.network() コンストラクタは、
//Flutterでインターネットから画像を表示する際に使用します。
body: Image.network(
'https://picsum.photos/250?image=9'),
),
);
}
}