【Flutter】MainAxisAlignmentの使い方｜メイン軸における配列の表示指定

2022 4/05

2021年4月17日 2022年4月5日

今回は「MainAxisAlignment」の基本的な使い方について紹介します。

MainAxisAlignmentを使えばColumn, Rowなどの配列（children）のメイン軸における表示方法を指定できます。

Columnの場合は「縦」、Rowの場合は「横」がメイン軸だよ！

下準備

今回はColumn、Rowそれぞれに配列されている３つの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

以上です。