今回は「ListTile」の基本的な使い方について紹介します。
ListTileを使えば手軽にListViewなどのリスト用のタイルを作成できます!
目次
ListTileの基本プロパティ
leading

leadingプロパティでListTileの1番左(titleの前)表示されるWidgetを指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListTile'),
),
body: Center(
child: Card(
child: ListTile(
leading: CircleAvatar(
child: Icon(Icons.face),
),
),
),
),
),
);
}
title

titleプロパティでメインWidgetを指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListTile'),
),
body: Center(
child: Card(
child: ListTile(
leading: CircleAvatar(
child: Icon(
Icons.face,
),
),
title: Text("Yamada Taro"),
),
),
),
),
);
}
trailing

trailingプロパティでListTileの1番右(titleの後)表示されるWidgetを指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListTile'),
),
body: Center(
child: Card(
child: ListTile(
leading: CircleAvatar(
child: Icon(
Icons.face,
),
),
title: Text(
"Yamada Taro",
),
trailing: Icon(
Icons.list,
),
),
),
),
),
);
}
subtitle

subtitleプロパティでtitleの下にサブとなるWidgetを指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListTile'),
),
body: Center(
child: Card(
child: ListTile(
leading: CircleAvatar(
child: Icon(
Icons.face,
),
),
title: Text(
"Yamada Taro",
),
subtitle: Text("Hello World"),
trailing: Icon(
Icons.list,
),
),
),
),
),
);
}
dense

denseプロパティで垂直方向に対して密度を高めることができます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListTile'),
),
body: Center(
child: Card(
child: ListTile(
leading: CircleAvatar(
child: Icon(
Icons.face,
),
),
title: Text(
"Yamada Taro",
),
subtitle: Text("Hello World"),
trailing: Icon(
Icons.list,
),
dense: true,
),
),
),
),
);
}
onTap & onLongPress
onTapプロパティはクリックされた時、onLongPressプロパティでは長押しされた時に定義したコールバック関数を実行します。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListTile'),
),
body: Center(
child: Card(
child: ListTile(
leading: CircleAvatar(
child: Icon(
Icons.face,
),
),
title: Text(
"Yamada Taro",
),
subtitle: Text("Hello World"),
trailing: Icon(
Icons.list,
),
dense: true,
onTap: () {
print("クリック");
},
onLongPress: () {
print("ロングプレス");
},
),
),
),
),
);
}
以上です。
おすすめ記事
あわせて読みたい


【Flutter】Cardの使い方|立体的なContainerを作る
今回は「Card」の基本的な使い方について紹介します。 Cardを使えば立体的なContainerを作成できます! 【Cardの基本プロパティ】 childcolormarginelevationshadowColo...