![見出し画像](https://assets.st-note.com/production/uploads/images/66991948/rectangle_large_type_2_66028694f18d290c1d5c99e1917a2b35.png?width=1200)
【Flutter】ListTileの使い方
Flutter開発で使う人の多いListTileウィジェットの使い方をまとめて紹介します。
title
ListTileのメインコンテンツを表示するWidget
ListTile(
title: const Text('title'),
)
![](https://assets.st-note.com/img/1638524458872-0BIMfg1bkZ.png?width=1200)
subtitle
titleの下に表示するWidget
ListTile(
title: const Text('title'),
subtitle: const Text('subtitle'),
)
![](https://assets.st-note.com/img/1638524505772-wyNJzYC2nt.png?width=1200)
leading
左端に表示するWidget
ListTile(
title: const Text('title'),
subtitle: const Text('subtitle'),
leading: const Icon(Icons.account_circle),
)
![](https://assets.st-note.com/img/1638524900592-sLSXUc1iG5.png?width=1200)
trailing
右端に表示するWidget
ListTile(
title: const Text('title'),
subtitle: const Text('subtitle'),
leading: const Icon(Icons.account_circle),
trailing: const Icon(Icons.push_pin),
)
![](https://assets.st-note.com/img/1638524999144-nSFezg6SMV.png?width=1200)
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: () {
},
)
![](https://assets.st-note.com/img/1638524986319-x6pnPk2Q6Q.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?