見出し画像

【Flutter】ListTileの使い方

Flutterラボ

Flutter開発で使う人の多いListTileウィジェットの使い方をまとめて紹介します。


title

ListTileのメインコンテンツを表示するWidget

ListTile(
  title: const Text('title'),
)

subtitle

titleの下に表示するWidget

ListTile(
  title: const Text('title'),
  subtitle: const Text('subtitle'),
)

leading

左端に表示するWidget

ListTile(
  title: const Text('title'),
  subtitle: const Text('subtitle'),
  leading: const Icon(Icons.account_circle),
)

trailing

右端に表示するWidget

ListTile(
  title: const Text('title'),
  subtitle: const Text('subtitle'),
  leading: const Icon(Icons.account_circle),
  trailing: const Icon(Icons.push_pin),
)

onTap

タップしたときの処理

ListTile(
  title: const Text('title'),
  subtitle: const Text('subtitle'),
  leading: const Icon(Icons.account_circle),
  trailing: const Icon(Icons.push_pin),
  onTap: () {
  },
)

tileColor

ListTileの色

body: ListTile(
  title: const Text('title'),
  subtitle: const Text('subtitle'),
  leading: const Icon(Icons.account_circle),
  trailing: const Icon(Icons.push_pin),
  tileColor: Colors.red,
  onTap: () {
  },
)


この記事が気に入ったらサポートをしてみませんか？