広告

Flutterラボの

プレミアム会員になる

【Flutter】ListTileの使い方とよく使うプロパティの紹介

2020.12.09

Flutter開発でのリスト表示を作成するときによく使う、ListTileウィジェットについて紹介したいと思います。

title

おそらく一番よく使われるプロパティで、ListTileの中に表示したいものを指定するプロパティです。

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

画像1

subtitle

titleの下に小さめに表示したいものを指定するプロパティです。

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

画像2

tileColor

ListTile全体の背景色を指定するプロパティです。

ListTile(
 title: Text('title'),
 subtitle: Text('subtitle'),
 tileColor: Colors.green,
)

画像3

leading

ListTileの左端に表示するものを指定するプロパティです。

ListTile(
 title: Text('title'),
 subtitle: Text('subtitle'),
 tileColor: Colors.green,
 leading: Icon(Icons.account_circle),
)

画像4

trailing

ListTileの右端に表示するものを指定するプロパティです。

ListTile(
 title: Text('title'),
 subtitle: Text('subtitle'),
 tileColor: Colors.green,
 leading: Icon(Icons.account_circle),
 trailing: Icon(Icons.clear),
)

画像5

onTap

タップしたときに実行する処理を指定するプロパティです。

ListTile(
 title: Text('title'),
 subtitle: Text('subtitle'),
 tileColor: Colors.green,
 leading: Icon(Icons.account_circle),
 trailing: Icon(Icons.clear),
 onTap: () {
   print('onTap');
 },
)
ハッチアウトスクール ハッチアウトスクールの公式サイトです hatchout.net


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)