【Flutter】左寄せや中央寄せをする（Alignment）

目次

概要

縦に並べる「Column」や横に並べる「Row」を使う時はmainAxisAlignmentというパラメータを設定する必要がある。
その時、場合によってはセンタリングしたい、上下左右のどれかに寄せたいなどあるだろう。
その設定方法をここで解説する。

ソースコード

アプリ実行部分

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'MainAxisAlignment/MainAxisAlignmentView.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        useMaterial3: true,
      ),
      home: const MainAxisAlignmentView(title: 'Flutter Demo Home Page'),
    );
  }
}

View部分

import 'package:flutter/material.dart';

class MainAxisAlignmentView extends StatefulWidget {
  const MainAxisAlignmentView({super.key, required this.title});
  final String title;

  @override
  State<MainAxisAlignmentView> createState() => _MainAxisAlignmentViewState();
}

class _MainAxisAlignmentViewState extends State<MainAxisAlignmentView> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(width: 150, height: 150,
                color: Colors.deepOrange,
                child: Text("上のView"),
            ),
            Container(width: 150, height: 150,
                color: Colors.blue,
                child: Text("中のView")
            ),
            Container(width: 150, height: 150,
                color: Colors.amber,
                child: Text("下のView")
            ),
          ],
        ),
      ),
    );
  }
}

詳細

今回は以下のmainAxisAlignmentの部分の話をしていく。
おさらいしておくが、以下が基本形になる。

縦並びの場合（Column）

Column(
  mainAxisAlignment: /* 今回のどうやってUIを配置するかの設定値 */,
  children: <Widget>[
    /* UIの羅列部分 */
  ],
)

横並びの場合（Row）

Row(
  mainAxisAlignment: /* 今回のどうやってUIを配置するかの設定値 */,
  children: <Widget>[
    /* UIの羅列部分 */
  ],
)

mainAxisAlignmentは以下の設定値が存在する。
それぞれのスクリーンショットはColumnのもの。Rowの場合はこれが横並びになると思ってもらえればいい。

MainAxisAlignment.start

この値はColumnの場合は上寄せに、Rowの場合は左寄せに配置する

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Container(width: 150, height: 150,
      color: Colors.deepOrange,
      child: Text("上のView"),
    ),
    Container(width: 150, height: 150,
      color: Colors.blue,
      child: Text("中のView")
    ),
    Container(width: 150, height: 150,
      color: Colors.amber,
      child: Text("下のView")
    ),
  ],
)

MainAxisAlignment.end

この値はColumnの場合は下寄せに、Rowの場合は右寄せに配置する

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    Container(width: 150, height: 150,
      color: Colors.deepOrange,
      child: Text("上のView"),
    ),
    Container(width: 150, height: 150,
      color: Colors.blue,
      child: Text("中のView")
    ),
    Container(width: 150, height: 150,
      color: Colors.amber,
      child: Text("下のView")
    ),
  ],
)

MainAxisAlignment.center

この値は画面の中央に寄せてUIを配置する。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(width: 150, height: 150,
      color: Colors.deepOrange,
      child: Text("上のView"),
    ),
    Container(width: 150, height: 150,
      color: Colors.blue,
      child: Text("中のView")
    ),
    Container(width: 150, height: 150,
      color: Colors.amber,
      child: Text("下のView")
    ),
  ],
)

MainAxisAlignment.spaceBetween

Columnの場合は最初の要素を上寄せに、最後の要素を下寄せに配置し、
それ以外のの要素の間隔が等しくなるように配置する。

Rowの場合は最初の要素を左寄せに、最後の要素を右寄せに配置し、
それ以外のの要素の間隔が等しくなるように配置する。

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(width: 150, height: 150,
      color: Colors.deepOrange,
      child: Text("上のView"),
    ),
    Container(width: 150, height: 150,
      color: Colors.blue,
      child: Text("中のView")
    ),
    Container(width: 150, height: 150,
      color: Colors.amber,
      child: Text("下のView")
    ),
  ],
)

MainAxisAlignment.spaceAround

この設定値は図の通り、UIの数だけ画面を分割し、それぞれのUIの上下（Rowなら左右）の間隔が等しくなるように配置する。

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(width: 150, height: 150,
      color: Colors.deepOrange,
      child: Text("上のView"),
    ),
    Container(width: 150, height: 150,
      color: Colors.blue,
      child: Text("中のView")
    ),
    Container(width: 150, height: 150,
      color: Colors.amber,
      child: Text("下のView")
    ),
  ],
)

MainAxisAlignment.spaceEvenly

この設定値はColumnの場合は上下の間隔が、Rowの場合は左右の間隔が等しくなるように配置される。

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Container(width: 150, height: 150,
      color: Colors.deepOrange,
      child: Text("上のView"),
    ),
    Container(width: 150, height: 150,
      color: Colors.blue,
      child: Text("中のView")
    ),
    Container(width: 150, height: 150,
      color: Colors.amber,
      child: Text("下のView")
    ),
  ],
)

参考ページ