[Flutter]ListViewの区切り線をつけたときにできる余白を消す方法

2020年9月18日

はじめに

FlutterのListViewにてListView.separatedにてDividerを設定した際に、空切り線の上下に自動でマージンが付くのを消す方法のメモ。
リストの最初の行には上に空切り線が出ないので、最初の行だけ上のマージンがおかしくなるのでどうにかしたかった。。

方法

以下のようにDividerのheightに1を設定ます。

ListView.separated(
    itemBuilder: (context, index) {
         return Container();
    },
    separatorBuilder: (context, index) => Divider(
          color: Colors.black,
          height: 1,
    ),
    itemCount: 10,
),

ListView.separated(

itemBuilder: (context, index) {

return Container();

separatorBuilder: (context, index) => Divider(

color: Colors.black,

height: 1,

itemCount: 10,

区切り線の太さ分だけの高さにしてしまうということですね。

以上です。