Flutterの画像表示の基本！Imageウィジェットの使い方をわかりやすく解説

1. Flutterで画像を表示する基本：Imageウィジェットとは？

1. Flutterで画像を表示する基本：Imageウィジェットとは？

Flutterで画像を表示するには、Imageウィジェットを使用します。Flutterアプリ開発において、画像の表示はとても重要な要素で、UIの魅力を高めるためにも欠かせません。

Imageウィジェットにはいくつかの表示方法があります。代表的なものは以下の3つです：

• Image.asset：アプリに含まれるローカル画像を表示
• Image.network：Web上のURL画像を表示
• Image.file：デバイスのローカルファイルを表示

2. Image.assetでアセット画像を表示する方法

2. Image.assetでアセット画像を表示する方法

アプリに含まれる画像ファイル（例えばPNGやJPG）を表示したい場合は、Image.assetを使います。まず、画像をassets/imagesなどのフォルダに配置し、pubspec.yamlに登録しましょう。

Image.asset(
  'assets/images/sample.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

fitプロパティを使えば、画像の表示方法（拡大・縮小・トリミング）も柔軟に設定できます。

3. Image.networkでインターネット上の画像を表示する

3. Image.networkでインターネット上の画像を表示する

Flutterでは、Web上の画像URLを使って直接画像を表示することも可能です。Image.networkを使えば、APIレスポンスなどで得た画像もすぐに表示できます。

Image.network(
  'https://example.com/images/photo.jpg',
  width: 300,
  height: 200,
  fit: BoxFit.contain,
)

ネットワーク画像は読み込み時間がかかることもあるため、loadingBuilderやerrorBuilderを使ってローディング中の表示やエラー対応もできます。

4. Image.fileでローカルファイルを表示する

4. Image.fileでローカルファイルを表示する

スマホやタブレットの内部ストレージに保存された画像を表示するにはImage.fileを使います。これは主にユーザーが撮影した写真などを表示する際に使用されます。

ファイル選択にはimage_pickerなどのパッケージを組み合わせて使うことが一般的です。

5. BoxFitで画像の拡大・縮小をコントロールする

5. BoxFitで画像の拡大・縮小をコントロールする

Flutterの画像表示で大切なのが、fitプロパティです。これを使うことで、画像の表示方法を細かく調整できます。

• BoxFit.cover：枠をはみ出してもいいから隙間をなくす
• BoxFit.contain：画像全体が枠に収まるように縮小
• BoxFit.fill：枠いっぱいに引き伸ばし（比率無視）
• BoxFit.fitWidth：幅を枠に合わせる

UIの見た目をきれいに保つために、表示する場所に合ったfit設定をすることが大切です。

6. Imageウィジェットに枠や丸みをつけたいときは？

6. Imageウィジェットに枠や丸みをつけたいときは？

画像に丸みをつけたり枠をつけたいときは、ClipRRectやContainerと組み合わせて使います。

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.asset('assets/images/photo.png'),
)

これで画像が角丸になり、より洗練されたデザインになります。さらにContainerにdecorationを使えば、枠線（ボーダー）も簡単に付けられます。

7. Flutterで画像をキャッシュする方法

7. Flutterで画像をキャッシュする方法

ネットワーク画像は毎回通信して表示するため、パフォーマンスに影響が出ることもあります。そんなときはcached_network_imageパッケージを使いましょう。

このパッケージを使えば、画像を一度読み込んでキャッシュしてくれるので、2回目以降は素早く表示できます。

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

Flutterでネットワーク画像を多用するアプリでは、ぜひ取り入れておきたいテクニックです。

8. 画像のアスペクト比を維持するには？

8. 画像のアスペクト比を維持するには？

画像の縦横比を保ったまま表示したい場合は、AspectRatioウィジェットを使うと便利です。

AspectRatio(
  aspectRatio: 16 / 9,
  child: Image.asset('assets/images/sample.png'),
)

たとえば16:9や4:3などの比率で表示することで、画面のバランスがよくなり、UI全体の見た目が整います。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Flutterで画像を表示するにはどうすればいいですか？Imageウィジェットの基本が知りたいです

Flutterで画像を表示するには、Imageウィジェットを使います。Image.assetやImage.network、Image.fileなどの形式で、ローカル画像やWeb画像、デバイス内の画像を表示できます。UI開発の基礎として覚えておくと便利です。