列 Column
を使って、縦方向に要素を並べます。
縦方向に要素を並べる
Column
は縦方向に要素を並べるためのウィジットです。
children
に並べたい要素を配列として要素を入れていきます。
縦方向の並びは mainAxisAlignment
で設定することができ、
Column(
mainAxisAlignment: MainAxisAlignment.start, // 縦方向は上に揃える
children: <Widget>[
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
],
)
のように書きます。
Column
には一つ以上の要素が入るので、child
ではなく、children
で要素を指定します。
<widget>[]
の中に、各要素をカンマ区切りで書いていくことで指定します。
指定できる 6 種類の MainAxisAlignment
の結果はそれぞれ以下の図で示されています。

MainAxisAlignment.start
上に揃える
MainAxisAlignment.center
中央に揃える
MainAxisAlignment.end
下に揃える
MainAxisAlignment.spaceAround
上部と下部のスペースは要素間スペースの半分となるように配置する。
MainAxisAlignment.spaceBetween
上部と下部にスペースが与えられないが、要素間は均等にスペースを与え配置する。
MainAxisAlignment.spaceEvenly
すべてのスペースを均等に与え配置する。
mainAxisAlignment
のデフォルトは、 MainAxisAlignment.start
です。つまり、何も指定しないと上揃えで並びます。
横方向の並び方を指定する
さらに、 mainAxisAlignment
で縦方向の並びを操作する同時に、 crossAxisAlignment
で横方向の並びを設定でき、
Column(
mainAxisAlignment: MainAxisAlignment.center, // 縦方向は中央に揃える
crossAxisAlignment: CrossAxisAlignment.start, // 横方向は左に揃える
children: <Widget>[
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
],
)
のように書きます。
指定できる 3 種類の CrossAxisAlignment
の結果はそれぞれ以下の図で示されています。

CrossAxisAlignment.start
左に揃える
CrossAxisAlignment.center
中央に揃える
CrossAxisAlignment.end
右に揃える
上記のよく使用される 3 種類の CrossAxisAlignment
の他に、 stretch
と baseline
もあります。
詳細はこちらのリンクを参照してください。