[Flutter]ListView.builderで区切り線(divider)をつけるには？

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

ListView.builderで区切り線をつける方法を紹介します。

方法
1. Divider
2. Container
まとめ

方法

ListViewで区切り線をつける方法は、２つあります。

Divider

１つは、Dividerウェジェットを使う方法です。

まず、リストの要素をColumnの子ウェジェットにします。

そして、引数「children」の後ろの方に、「Dividerウェジェット」を追加します。

以下は、使用例です。

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) {
    return Column(
      children: [
        ListTile(
          title: Text('$index'),
        ),
        Divider(), //区切り線
      ],
    );
  },
)

Container

もう１つは、Containerウェジェットを使う方法です。

まず、表示するリストの要素をContainerの「child」に指定します。

次に、Containerの引数「decoration」に「BoxDecoration」を指定します。

最後に、指定したBoxDecorationの引数「border」に、「border: Border(bottom: BorderSide())」を設定します。

以下は、使用例です。

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(),//区切り線
        ),
      ),
      child: ListTile(
        title: Text('$index'),
      ),
    );
  },
)