FlutterのmainAxisAlignment:MainAxisAlignment

この記事では、FlutterのmainAxisAlignment:MainAxisAlignmentについて書いていきます。

mainAxisAlignment:MainAxisAlignmentとは
主な値
サンプル
center
start
end
spaceAround
spaceBetween
spaceEvenly

mainAxisAlignment:MainAxisAlignmentとは

「メイン・アクシス・アライメント」 と読みます。

Main（メイン）：主要な、主たる
Axis（アクシス）：軸
Alignment（アライメント）：配置、整列

ColumnやRowなどのフレックスレイアウトで、子ウィジェットを軸（Main Axis)をどのように配置するかを指定する列挙型（enum）です。要するに、子Widgetの軸の並び方向の配置のことです。Columnなら縦、Rowなら横が主軸の方向となります。

mainAxisAlignmentプロパティは列挙型（enum）MainAxisAlignmentしか受け取らず以下の値のみ使用できます。

enum MainAxisAlignment {
  start,
  end,
  center,
  spaceBetween,
  spaceAround,
  spaceEvenly,
}

主な値

種別	内容
center	中央寄せ
start	`Row`なら左寄せ、`Column`なら上寄せ
end	`Row`なら右寄せ、`Column`なら下寄せ
spaceAround	先頭の子要素の前末尾の子要素の後にスペースを空けるまた子要素の間に均等なスペースを空けるこれらの2つのスペースのサイズは異なる
spaceBetween	子要素の間に均等なスペースを空ける
spaceEvenly	先頭の子要素の前末尾の子要素の後または子要素の間に均等なスペース空ける spaceAroundと違い全てのスペースが均等になる

サンプル

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('MainAxisAlignment sample')),
        body: Center(
          child: Column(
            // 主軸（縦方向）の中央に配置
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // 1つ目のコンテナ
              Container(
                width: 80,
                height: 80,
                color: Colors.red,
                alignment: Alignment.center, // テキストを中央寄せ
                child: const Text(
                  '1',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(height: 10),

              // 2つ目のコンテナ
              Container(
                width: 80,
                height: 80,
                color: Colors.green,
                alignment: Alignment.center, // テキストを中央寄せ
                child: const Text(
                  '2',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(height: 10),

              // 3つ目のコンテナ
              Container(
                width: 80,
                height: 80,
                color: Colors.blue,
                alignment: Alignment.center, // テキストを中央寄せ
                child: const Text(
                  '3',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}