[Flutter]「縦の区切り線」を表示するウェジェット

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

区切り線には、Dividerウェジェットがあります。

ですが、このウェジェットが表示するのは、横の区切り線で、縦の区切り線を表示することが出来ません。

そこで、縦の区切り線を表示するウェジェットを紹介します。

VerticalDivider

「VerticalDividerウェジェット」は、縦の区切り線を表示します。

このウェジェットは、引数なしで簡単に使うことが出来ます。

もし、区切り線に細かい設定をしたいなら次のような引数を使います。

• color : 線の色
• width : 横幅
• thickness : 線の太さ
• indent : 区切り線の上の余白
• endIndent : 区切り線の下の余白

どれも必須という訳ではないので、必要ならば使ってください。

VerticalDivider class - material library - Dart API

API docs for the VerticalDivider class from the material library, for the Dart programming language.

api.flutter.dev

使用例

 Row(
          children: [
            Text("Item"),
            VerticalDivider(
              color: Colors.red,
              thickness: 3,
              width: 50,
              indent: 200,
              endIndent: 200,
            ),
            Text("Item")
          ],
        )

「Dividerウェジェット」の引数「height」が、「width」に変わるだけで、使い方は全く同じです。

まとめ

縦の区切り線は、「VerticalDividerウェジェット」で表示することが出来ます。