Flutter ListViewに区切り線を付けるサンプル
環境
Windows11 pro 64bit
Flutter 3.3.7
構文
Divider(
height: xx,
thickness: xx,
color: Colors.red,
)
Divider(
height: xx,
thickness: xx,
color: Colors.red,
)
Divider( height: xx, thickness: xx, color: Colors.red, )
ListViewで区切り線を付けるには、「Dividerウェジェット」を使います。
Dividerウェジェットを、要素の間に配置することで、ListViewに区切り線を引くことが出来ます。
高さ(height)、線の太さ(thickness)、色(color)の設定をすることが出来ます。
使用例
ListView(
children: [
ListTile(
title: Text("テスト項目"),
),
Divider(
height: 3,
thickness: 4,
color: Colors.red,
),
ListTile(
title: Text("テスト項目"),
)
],
)
ListView(
children: [
ListTile(
title: Text("テスト項目"),
),
Divider(
height: 3,
thickness: 4,
color: Colors.red,
),
ListTile(
title: Text("テスト項目"),
)
],
)
ListView( children: [ ListTile( title: Text("テスト項目"), ), Divider( height: 3, thickness: 4, color: Colors.red, ), ListTile( title: Text("テスト項目"), ) ], )