[Flutter]Columnの要素同士の余白を作るには？

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

Columnの要素同士の余白を作る方法を紹介します。

方法

Columnの要素同士の余白を作る方法は、２つあります。

SizedBox

１つは、SizedBoxを使う方法です。

まず、要素同士にSizedBoxを配置します。

そして、SizedBoxの引数「hegiht」に余白の大きさを指定します。

Column(
  children: [
    Widget1(),
    SizedBox(height: 余白の大きさ),
    Widget2()
  ],
),

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            SizedBox(height: 20.0),
            Container(
              color: Colors.green,
              height: 100,
              width: 100,
            ),
            SizedBox(height: 35.0),
            Container(
              color: Colors.red,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }

Spacer

もう１つは、Spacerを使う方法です。

具体的には、要素同士の間にSpacer()を配置します。

Column(
  children: [
    Widget1(),
    Spacer()
    Widget2()
  ],
),

Spacerは、使用できる最大限の余白を、余白の大きさにします。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Spacer(),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Spacer(),
            Container(
              color: Colors.green,
              height: 100,
              width: 100,
            ),
            Spacer(),
            Container(
              color: Colors.red,
              height: 100,
              width: 100,
            ),
            Spacer(),
          ],
        ),
      ),
    );
  }

まとめ

Columnで余白を作るには、SizedBoxもしくはSpacerを使います。