[Flutter]横スクロール(horizontal)のリストビュー(listview)に区切り線(divider)をつけるには？

どうも、ちょげ(@chogetarou)です。

横スクロールのリストビューに区切り線をつける方法を紹介します。

方法

横スクロールのリストビューに区切り線をつけるには、VerticalDividerを使います。

通常の「Divider」は横向きの区切り線ですが、VerticalDividerは縦向きの区切り線を引くことが出来ます。

このVerticalDividerを要素の間に指定します。

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(),
    VerticalDivider(),
    Container(),
  ],
),

以下は、使用例です。

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      color: Colors.green,
      height: 100,
      width: 100,
      child: Text('Item: 1'),
    ),
    VerticalDivider(
      thickness: 3,
    ),
    Container(
      color: Colors.green,
      height: 100,
      width: 100,
      child: Text('item : 2'),
    ),
  ],
),