[Flutter]Column(カラム)の要素(item)同士のパディング(padding)を設定するには？

[Flutter]Columnの要素同士のパディングを設定するには？

Flutter

2021.11.28

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

Columnの要素同士のパディングを設定する方法を紹介します。

方法
1. SizedBox
2. Padding
まとめ

方法

Columnの要素同士のパディングを設定する方法は２つあります。

SizedBox

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

具体的には、要素同士の間にSizedBoxを配置し、SizedBoxの引数「height」にパディングを指定します。

Column(
  children: [
    Item1(),
    SizedBox(
      height: /*パディング*/, 
    ),
    Item2(),
  ],
),

以下は、使用例です。

Column(
  children: [
    Container(
      color: Colors.blue,
      height: 100,
    ),
    SizedBox(
      height: 20, //パディング２０
    ),
    Container(
      color: Colors.green,
      height: 100,
    ),
  ],
),

Padding

もう１つは、Paddingウェジェットを使う方法です。

まず、要素をPaddingでラップします。

そして、paddingの引数「padding」にパディングを設定します。

Column(
  children: [
    Padding(
      padding: EdgeInsets.only(
        top: /*上のパディング*/,
        bottom: /*下のパディング*/,
      ),
      child: Item(),
    ),
    Padding(
      padding: EdgeInsets.symmetric(vertical: /*上と下のパディング*/),
      child: Item(),
    ),
  ],
),

以下は、使用例です。

Column(
  children: [
    Padding(
      padding: EdgeInsets.only(
        bottom: 20, //下に２０
      ),
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
    Padding(
      padding: EdgeInsets.symmetric(vertical: 10), //上と下に２０
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
    Padding(
      padding: EdgeInsets.only(
        top: 15, //上に１５
      ),
      child: Container(
        color: Colors.pink,
        height: 100,
      ),
    ),
  ],
),