Flutter ListViewに区切り線を付けるサンプル

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

Divider(
          height: xx,
          thickness: xx,
          color: Colors.red,
        )

ListViewで区切り線を付けるには、「Dividerウェジェット」を使います。
Dividerウェジェットを、要素の間に配置することで、ListViewに区切り線を引くことが出来ます。
高さ(height)、線の太さ(thickness)、色(color)の設定をすることが出来ます。

使用例

ListView(
              children: [
                ListTile(
                  title: Text("テスト項目"),
                ),
                Divider(
                  height: 3,
                  thickness: 4,
                  color: Colors.red,
                ),
                ListTile(
                  title: Text("テスト項目"),
                )
              ],
            )

 

Flutter

Posted by arkgame