【Flutter】mainAxisAlignmentプロパティの使い方｜MainAxisAlignment

mainAxisAlignmentプロパティとは？

//例
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [ 
    Text('Hello World'),
    Text('Hello World 2'),
    Text('Hello World 3'),
  ],
),

mainAxisAlignmentプロパティは、ColumnやRow Widgetなどのプロパティで使われ、childrenのメイン軸(Columnはy軸、Rowはx軸がメイン軸)におけるレイアウトを指定します。また、mainAxisAlignmentの引数にMainAxisAlignmentを代入します。

>>【Flutter】Widgetの基本的な仕組み/使い方

MainAxisAlignmentの基本的な使い方

MainAxisAlignment.start

MainAxisAlignment.start

childrenをメイン軸の最初に配置します。

MainAxisAlignment.center

MainAxisAlignment.center

childrenをメイン軸の中心に配置します。

MainAxisAlignment.end

MainAxisAlignment.end

childrenをメイン軸の最後に配置します。

MainAxisAlignment.spaceBetween

MainAxisAlignment.spaceBetween

childrenのWidgetの間に均等に余白を作ります。また最初のWidgetの手前、最後のWidgetの後に余白を作りません。

MainAxisAlignment.spaceAround

MainAxisAlignment.spaceAround

childrenのWidgetの間に均等に余白を作ります。また最初のWidgetの手前、最後のWidgetの後の余白はWidget間の余白の大きさの半分になります。

MainAxisAlignment.spaceEvenly

MainAxisAlignment.spaceAround

childrenのWidgetの間に均等に余白を作ります。また最初のWidgetの手前、最後のWidgetの後の余白はWidget間の余白の大きさと同じです。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}