【Flutter】 画像の表示方法
公式ドキュメント
サンプルコード
上記のサンプルを自身でパラメーターを触りながら学習したほうが学習効率が良いと思います。初学者の方はそちらをおすすめします。
画像を表示するための準備
画像を表示するためには、まずアセットを実装する必要があります。アセットとは、アプリと一緒にバンドルされ、実行時にアクセスできるファイルのことです。
アセットの種類
アセットには以下のような種類があります：
- 静的データ（JSON ファイルなど）
- 設定ファイル
- アイコン
- 画像（JPEG, WebP, GIF, アニメーション WebP/GIF, PNG など）
画像フォーマットについて
Flutter では様々な画像フォーマットをサポートしています：
- JPEG: 写真などの複雑な画像に適した圧縮形式
- PNG: 透過をサポートし、線画やアイコンに適した形式
- WebP: 高圧縮率と透過をサポートする比較的新しい形式
- GIF: アニメーションをサポートする形式
アセットの指定方法
Flutter では、プロジェクトのルートにある pubspec.yaml ファイルを使って、アプリに必要なアセットを指定します。
基本的な指定方法
flutter:
assets:
- assets/my_icon.png
- assets/background.png
ディレクトリ内のすべてのファイルを指定
ディレクトリ内のすべてのファイルを含めるには、ディレクトリ名の末尾に / をつけます：
flutter:
assets:
- directory/
- directory/subdirectory/
ディレクトリを指定する場合、直接そのディレクトリにあるファイルのみが含まれます。サブディレクトリ内のファイルを追加するには、各ディレクトリごとにエントリを作成する必要があります。
YAML ではインデントが重要です。flutter: の行の下に assets: 行を正確に 2 つのスペースでインデントする必要があります。
間違った例と正しい例
間違った例：
flutter:
assets:
- directory/
正しい例：
flutter:
assets:
- directory/
アセットのバンドル
pubspec.yamlファイルのflutterセクションのassetsサブセクションで、アプリに含めるべきファイルを指定します。各アセットは、アセットファイルがある場所の明示的なパス（pubspec.yamlファイルからの相対パス）で識別されます。
ビルド中、Flutter はアセットを「アセットバンドル」と呼ばれる特別なアーカイブに配置し、アプリは実行時にこれから読み込みます。
ビルド時のアセットファイルの自動変換
Flutter では、アプリのビルド時に Dart パッケージを使用してアセットファイルを変換することができます。これを行うには、pubspecファイルでアセットファイルを指定します。
アセットの読み込み
アプリはAssetBundleオブジェクトを通じてアセットにアクセスできます。
アセットバンドルには主に 2 つのメソッドがあります：
-
loadString()- テキストアセットを読み込む -
load()- 画像/バイナリアセットを読み込む
テキストアセットの読み込み
各 Flutter アプリには、メインアセットバンドルに簡単にアクセスするためのrootBundleオブジェクトがあります。
// rootBundleを使用する場合
import 'package:flutter/services.dart' show rootBundle;
// JSONファイルを読み込む関数
Future<String> loadAsset() async {
// assets/config.jsonファイルを読み込む
return await rootBundle.loadString('assets/config.json');
}
DefaultAssetBundle.of()を使用して間接的にアセットを読み込むことが推奨されています。これにより、実行時に親ウィジェットが異なるAssetBundleを置き換えることができます。
画像の読み込み
Flutter で画像を表示するには、主にImageウィジェットを使用します。Imageクラスにはいくつかの便利なファクトリメソッドがあり、さまざまなソースから画像を簡単に読み込むことができます。
アセットから画像を読み込む
Image.asset('assets/background.png')
ネットワークから画像を読み込む
Image.network('https://example.com/image.png')
Image ウィジェットのプロパティ
Imageウィジェットには多数の便利なプロパティがあります：
Image.asset(
'assets/background.png',
width: 200, // 幅を指定
height: 100, // 高さを指定
fit: BoxFit.cover, // 画像のフィット方法を指定
alignment: Alignment.center, // 画像の配置を指定
color: Colors.blue, // 画像に適用する色
colorBlendMode: BlendMode.modulate, // 色のブレンドモード
semanticLabel: '背景画像', // アクセシビリティのためのラベル
cacheWidth: 300, // キャッシュする画像の幅（メモリ最適化）
cacheHeight: 200, // キャッシュする画像の高さ（メモリ最適化）
)
BoxFit プロパティ
このパラメータの調整によって、見え方が大きく変わります。
| BoxFit 値 | 説明 | アスペクト比 | 使用場面 |
|---|---|---|---|
| fill | コンテナを完全に埋める | 無視される（歪む） | 背景画像で隙間を作りたくない場合 |
| contain | 画像全体が表示されるよう調整 | 維持される | 商品画像など全体を見せたい場合 |
| cover | コンテナを完全に覆う | 維持される | プロフィール画像やカバー写真 |
| fitWidth | 幅に合わせて調整 | 維持される | 横長のギャラリーやバナー |
| fitHeight | 高さに合わせて調整 | 維持される | 縦長のリストやサイドバー |
| none | サイズ変更なし | 維持される | アイコンなど元のサイズを保持したい場合 |
実際に実装した例
Discussion