[Flutter]「区切り線」をつけるウェジェット

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

Flutterには、区切り線を付けるためのウェジェットがあります。

この記事では、「区切り線」のウェジェットを紹介します。

区切り線
1. 横
2. 縦
まとめ

区切り線

区切り線は、縦と横で違うウェジェットを使います。

横

横の区切り線には、「Dividerウェジェット」を使います。

Divirderウェジェットは、引数なしでも使うことが出来ます。

設定

もし、デフォルトのものではなく、アレンジした区切り線を使いたい場合は、Dividerウェジェットの引数で行います。

以下は、主な引数です。

height : 区切り線の高さ（太さではない）
color : 色
thickness : 区切り線の太さ
indent : 左側の余白
endIndent : 右側の余白

どれも必須という訳ではなく、必要だったら使うということになります。

使用例

Column(
          children: [
            Text("Item"),
            Divider(
              color: Colors.red,
              thickness: 3,
              height: 50,
              indent: 20,
              endIndent: 20,
            ),
            Text("Item")
          ],
        )

「indent」と「endIndent」というのは、イメージとしては、左右の端をどれだけ削るかです。

「indent」に指定した値だけ左端を短くします。

「endIndent」は、右側です。

Divider class - material library - Dart API

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

縦

縦の区切り線には、「VerticalDividerウェジェット」を使います。

基本的な使い方は、Dividerウェジェットと変わらないです。

違うところは、２つあります。

１つは、「Dividerウェジェット」の引数「height」が、「VerticalDividerウェジェット」では「width」になるところです。

もう１つは、「indent」は区切り線の上、「endIndent」は区切り線の下を短くするところです。

使用例

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

引数「height」が「width」に変わるだけで、あまり変わることはありません。