本記事では、FlutterのウィジェットであるListTile()について、カスタマイズ方法をまとめます。
![](https://www.mechengjp.com/wp-content/uploads/2022/02/fd782384e4383e42e115c42c4c3bb031.png)
目次
ListTile()とは?
ListTile()とは、ウィジェットの1つで、リストを表示する際に使用します。タイルの中身をアレンジすることで、YouTubeの一覧表のようなデザインや、メール受信箱のデザインなどを作成することができます。
アレンジ一覧
文字の幅を狭くする
文字間隔を狭めます。dense
を使います。
![](https://www.mechengjp.com/wp-content/uploads/2022/02/7b57b756c957a675366a2918ca2ebeeb.png)
ListTile(
leading: Text('leading'),
title: Text('title'),
subtitle: Text('Subtitle'),
trailing: Text('Trailing'),
dense: true,
)
角を丸くする
タイルの周りを丸くします。shape
を使います。
![](https://www.mechengjp.com/wp-content/uploads/2022/02/e2457d5da4ef23ce58e986786152efd7.png)
ListTile(
leading: Icon(Icons.public),
title: Text('title'),
subtitle: Text('Subtitle'),
trailing: Text('Trailing'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(100)),
),
),
高さを変える
タイルに収まる行数を三行分に広げます。isThreeLine
を使います。
![](https://www.mechengjp.com/wp-content/uploads/2022/02/b9b31d564dbc296de4580bdd804527da.png)
ListTile(
leading: Icon(Icons.public),
title: Text('title'),
subtitle: Text('Subtitle'),
trailing: Text('Trailing'),
isThreeLine: true,
),
おまけ:枠線をつける
Card()
を使うと枠線に影がつきます。
![](https://www.mechengjp.com/wp-content/uploads/2022/02/9d03fb02cade8bdef9a152b9fa9d65d2.png)
Card(
child: ListTile()
)
おまけ:角を丸くする
こちらで、ListTile()
を角が丸いContainer()
で囲んで角を丸くする方法が紹介されていました。
Widget _buildListItem(String item) {
return Padding(
padding: const EdgeInsets.all(10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20)
),
color: Colors.white,
),
child: ListTile(
title: Text(item),
),
),
);
}
milestones
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://de-milestones.com/wp-content/uploads/2021/06/スクリーンショット-2021-06-20-20.49.08.png)
【Flutter】ListTileを角丸にする方法(borderなし)
borderを使わずに角丸にする方法です。 方針 ListTileを直接丸くするのではなく、ListTileの親のContainerを丸くする。 実際のコード Widget _buildListItem(String item) ...
コメント