[Flutter]Row(ロウ)に区切り線(vertical divider)を表示するには？

[Flutter]Rowに区切り線を表示するには？

Flutter

2021.12.02

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

Rowに区切り線を表示する方法を紹介します。

方法
使用例

方法

Rowに区切り線を表示するには、VerticalDividerを使います。

具体的には、Rowの引数「children」の区切り線を表示したい場所にVerticalDividerを配置します。

Row(
  children: [
      Widget1(),
      VerticalDivider(), //区切り線
      Widget2(),
  ],
),

これでRowに区切り線を表示することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SizedBox(
          child: Row(
            children: [
              for (var i = 0; i < 10; i++)
                Row(
                  children: [
                    Text('$i'),
                    VerticalDivider(
                      thickness: 2,
                    ),
                  ],
                ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceAround,
          ),
          height: 200,
        ),
      ),
    );
  }