今回は「MainAxisAlignment」の基本的な使い方について紹介します。
MainAxisAlignmentを使えばColumn, Rowなどの配列(children)のメイン軸における表示方法を指定できます。

Columnの場合は「縦」、Rowの場合は「横」がメイン軸だよ!
目次
下準備


今回はColumn、Rowそれぞれに配列されている3つのContainerの表示方法をメイン軸で指定していきます。
//ソース(Column)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Column(
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
),
),
);
}
//ソース(Row)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: Row(
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
),
),
);
}
MainAxisAlignmentの種類(enum)
- start(デフォルト)
- center
- end
- spaceBetween
- spaceEvenly
- spaceAround
start


配列をメイン軸の開始位置に配置します。
mainAxisAlignment: MainAxisAlignment.start
center


配列をメイン軸の中央に配置します。
mainAxisAlignment: MainAxisAlignment.center
end


配列をメイン軸の終了位置に配置します。
mainAxisAlignment: MainAxisAlignment.end
spaceBetween


childの間に均等の余白を作ります。
mainAxisAlignment: MainAxisAlignment.spaceBetween
spaceEvenly


開始位置、child、終了位置の間に均等の余白を作ります。
mainAxisAlignment: MainAxisAlignment.spaceEvenly
spaceAround


メイン軸方向において各childの周りに均等の余白を作ります。
mainAxisAlignment: MainAxisAlignment.spaceAround
以上です。
おすすめ記事!
あわせて読みたい


【Flutter】CrossAxisAlignmentの使い方|クロス軸における配列の表示指定
今回は「CrossAxisAlignment」の基本的な使い方について紹介します。 CrossAxisAlignmentを使えばColumn, Rowなどの配列(children)のクロス軸における表示方法を指定...