[Flutter]リストビューの要素同士のパディングを設定するには？

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

リストビューの要素同士のパディングを設定する方法を紹介します。

方法

リストビューで要素同士のパディングを設定する方法は3つあります。

SizedBox

1つ目は、SizedBoxを使う方法です。

表示する要素の間にSizedBoxを配置し、引数「heght」でパディングにしたい値を設定します。

child: ListView(
  children: [
    /*Item*/,
    SizedBox(
      height: /*パディング*/,
    ),
    /*Item*/,
  ],
),

separated + SizedBox

２つ目は、separatedとSizedBoxを使う方法です。

まず、ListViewではなく、ListView.separatedを使います。

次に、「ListView.separated」の引数「itemBuilder」で表示する要素を返し、引数「itemCount」で要素数を指定します。

最後に、引数「separatedBuilder」で、引数「height」にパディングを指定したSizedBoxを返します。

以下は、使用例です。

ListView.separated(
  itemBuilder: (context, index) {
    return Container( //要素
      color: Colors.blue,
      height: 50,
    );
  },
  separatorBuilder: (context, index) {
    return SizedBox(
      height: 5, //パディング
    );
  },
  itemCount: 20, //要素数
),

Padding

３つ目は、Paddingウェジェットを使う方法です。

まず、表示する要素をPaddingの「child」に指定します。

そして、引数「padding」に「EdgeInsets.symmetric(vertical: /*パディング*/)」を指定します。

Padding(
  padding: const EdgeInsets.symmetric(vertical: /*パディング*/),
  child: /*要素*/,
),

以下は、使用例です。

ListView(
  children: [
    for (var i = 0; i < 20; i++)
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 1),
        child: Card(
          color: Colors.blue,
        ),
      ),
  ],
  itemExtent: 50,
)

まとめ

ListViewの要素同士のパディングを設定する方法は、次の３つです。

• SizedBox
• Separated + SizedBox
• Padding