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

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Divider(
height: xx,
thickness: xx,
color: Colors.red,
)
Divider( height: xx, thickness: xx, color: Colors.red, )
Divider(
          height: xx,
          thickness: xx,
          color: Colors.red,
        )

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
ListView(
children: [
ListTile(
title: Text("テスト項目"),
),
Divider(
height: 3,
thickness: 4,
color: Colors.red,
),
ListTile(
title: Text("テスト項目"),
)
],
)
ListView( children: [ ListTile( title: Text("テスト項目"), ), Divider( height: 3, thickness: 4, color: Colors.red, ), ListTile( title: Text("テスト項目"), ) ], )
ListView(
              children: [
                ListTile(
                  title: Text("テスト項目"),
                ),
                Divider(
                  height: 3,
                  thickness: 4,
                  color: Colors.red,
                ),
                ListTile(
                  title: Text("テスト項目"),
                )
              ],
            )

 

Flutter

Posted by arkgame