【Flutter】ListTileの使い方

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: () {
  },
)

Flutterラボ - 「Flutterラボ」では動画でFlutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで誰でも気軽にFlutterが学べるコンテンツを公開しています。