[Flutter]ColumnのmainAxisAlignmentとは？

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

ColumnのmainAxisAlignmentについて解説します。

mainAxisAlignmentとは
まとめ

mainAxisAlignmentとは

ColumnのmainAxisAlignmentは、Columnのchildrenの配置の仕方を設定できる引数です。

設定には、MainAxisAlignmentの次の６つの値を指定します。

MainAxisAlignment.start : 上寄せ
MainAxisAlignment.center : 中央寄せ
MainAxisAlignment.end : 下寄せ
MainAxisAlignment.spaceAround : 均等配置。最初の要素の前と最後の要素の後の間隔は半分。
MainAxisAlignment.spaceBetween : 均等配置。最初と最後の要素は端に配置。
MainAxisAlignment.spaceEvenly : 均等配置。最初の要素の前と最後の要素の後の間隔も同じ。

MainAxisAlignment.start

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(
      height: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
    Container(
      height: 100,
      color: Colors.yellow,
    ),
    Container(
      height: 100,
      color: Colors.orange,
    ),
    Container(
      height: 100,
      color: Colors.purple,
    ),
    Container(
      height: 100,
      color: Colors.pink,
    ),
  ],
),

MainAxisAlignment.center

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
    Container(
      height: 100,
      color: Colors.yellow,
    ),
    ~~~省略~~~
  ],
),

MainAxisAlignment.end

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(
      height: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
    Container(
      height: 100,
      color: Colors.yellow,
    ),
    ~~~省略~~~
  ],
),

MainAxisAlignment.spaceAround

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(
      height: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
    Container(
      height: 100,
      color: Colors.yellow,
    ),
    ~~~省略~~~
  ],
),

MainAxisAlignment.spaceBetween

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(
      height: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
    Container(
      height: 100,
      color: Colors.yellow,
    ),
    ~~~省略~~~
  ],
),

MainAxisAlignment.spaceEvenly

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
      height: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      color: Colors.green,
    ),
    Container(
      height: 100,
      color: Colors.yellow,
    ),
    ~~~省略~~~
  ],
),