[Flutter]Column(カラム)の要素(item children)の間隔(spacing)を設定するには？

[Flutter]Columnの要素の間隔を設定するには？

Flutter

2021.11.29

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

Columnの要素の間隔を設定する方法を紹介します。

方法
使用例

方法

Columnの要素の間隔を設定するには、SizedBoxを使います。

まず、Columnの要素の間にSizedBoxを配置します。

そして、SizedBoxの引数「height」に要素の間隔を指定します。

Column(
  children: [
    Widget(),
    SizedBox(
      height: /*間隔*/,
    ),
    Widget(),
 ],
),

これでColumnの要素の間隔を設定することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 100,
              color: Colors.blue,
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              height: 100,
              color: Colors.blue,
            ),
            SizedBox(
              height: 55.5,
            ),
            Container(
              height: 100,
              color: Colors.blue,
            ),
            SizedBox(
              height: 100.0,
            ),
            Container(
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }