【Flutter】ListTile内に画像を表示する方法

この記事はで読むことができます。

はじめに

Flutterを使用してアプリを開発する際、リストビュー内のアイテムを表示するのに便利なListTileウィジェットがあります。本記事では、初心者向けにListTile内に画像を表示する方法を解説します。

この記事でわかること

ListTile内に画像を表示する方法
ListTileのカスタマイズ方法

方法1: ListTileの引数 leading を使用

最初の方法は、ListTileウィジェットの引数 leading を利用して画像やアイコンを表示する方法です。leadingはListTileの左側にウィジェットを表示するための引数です。

実装例

Dart

ListTile(
  tileColor: Colors.black12,
  leading: Image.asset(
    'assets/image.png',
    height: 48, // 画像の高さ
    width: 48,  // 画像の幅
  ),
  title: Text('アイテム1'),
)

特徴

leadingに指定するウィジェットは自由に変更できるため、アイコンや画像、円形アバター、カスタムウィジェットなどさまざまな用途に対応します。
カスタマイズが容易で、背景画像の指定にも適しています。

実行結果

方法2: CircleAvatarを使用

次の方法は、CircleAvatarウィジェットを利用して画像を表示する方法です。CircleAvatarは円形のアバター（アイコンや画像）を簡単に表示するためのウィジェットです。

実装例

Dart

ListTile(
  tileColor: Colors.black12,
  leading: CircleAvatar(
    backgroundImage: AssetImage('assets/image.png'),
    radius: 24, // CircleAvatarの半径
  ),
  title: Text('アイテム2'),
)

特徴

シンプルな構造でありながら、円形の画像やアイコンを直感的に表示できる便利なウィジェットです。
ListTile内で他のウィジェットと組み合わせて使用できます。

実行結果

方法3: ListTileをカスタマイズ

最後の方法は、ListTileウィジェットのtitle引数にカスタムウィジェットを指定し、RowやColumnを利用して画像とテキストを自由に配置する方法です。これにより、ListTileのデフォルトのレイアウトに依存せず、柔軟なデザインが実現できます。

実装例

Dart

ListTile(
  tileColor: Colors.black12,
  title: Row(
    children: [
      Image.asset(
        'assets/image.png',
        height: 48, // 画像の高さ
        width: 48,  // 画像の幅
      ),
      SizedBox(width: 16), // 画像とテキストの間にスペースを追加
      Text('アイテム3'),
    ],
  ),
)

特徴