Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Flutter] MainAxisAlignment と CrossAxisAlignment の利用方法

More than 1 year has passed since last update.

はじめに

Flutterrowcolumnの子要素の並び、つまりアライメントは
MainAxisAlignmentCrossAxisAlignmentにて変更できるようになっています。
これらの動作ですがわりと忘れてしまうのでチートシートという形でまとめておきたいと思います。

8kHBpNGo-clipboard.png 5C6ZEv9P-clipboard.png

MainAxisAligment

MainAxisAligment では次の種別でアライメントを変更できる。

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

Row

スクリーンショット

Screenshot_1578120265.png

ソースコード

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('start1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('start2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('start3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('center1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('center2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('center3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('end1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('end2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('end2', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceBetween1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceBetween2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceBetween3', style: TextStyle(fontSize: 15))),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly3', style: TextStyle(fontSize: 15))),
            ]),
          ],
        ),
      ),
    );
  }

Column

スクリーンショット

Screenshot_1578120076.png

ソースコード

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                      color: Colors.blue,
                      child: Text('start1', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('start2', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('start3', style: TextStyle(fontSize: 15))),
                ]),
            Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                      color: Colors.blue,
                      child: Text('center1', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('center2', style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('center3', style: TextStyle(fontSize: 15))),
                ]),
            Column(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('end1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child:  Text('end2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('end2', style: TextStyle(fontSize: 15))),
            ]),
            Column(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceAround3', style: TextStyle(fontSize: 15))),
            ]),
            Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                      color: Colors.blue,
                      child: Text('spaceBetween1',
                          style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('spaceBetween2',
                          style: TextStyle(fontSize: 15))),
                  Container(
                      color: Colors.blue,
                      child: Text('spaceBetween3',
                          style: TextStyle(fontSize: 15))),
                ]),
            Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <
                Widget>[
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly1', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly2', style: TextStyle(fontSize: 15))),
              Container(
                  color: Colors.blue,
                  child: Text('spaceEvenly3', style: TextStyle(fontSize: 15))),
            ]),
          ],
        ),
      ),
    );
  }

CrossAxisAlignment

CrossAxisAlignment では次の種別でアライメントを変更できる。

種別 内容
baseline テキストのベースラインを揃えるように配置される
center 中央寄せになる
start Columnなら左寄せ(厳密にはTextDirectionによって開始位置が決まる)
Rowなら上寄せになる(厳密にはVerticalDirectionによって開始位置が決まる)
end Columnなら右寄せ(厳密にはTextDirectionによって開始位置が決まる)
Rowなら上寄せになる(厳密にはVerticalDirectionによって開始位置が決まる)
streach 子要素の幅また高さを埋めるように配置する

Row

スクリーンショット

Screenshot_1578119352.png

ソースコード

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('center1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('center2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('center3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('start1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('start2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('start3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('end1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('end2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('end3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('stretch1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('stretch2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('stretch3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Row(
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('baseline1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('baseline2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('baseline3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
          ],
        ),
      ),
    );
  }

Column

スクリーンショット

Screenshot_1578119439.png

ソースコード

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('center1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('center2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('center3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('start1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('start2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('start3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('end1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('end2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('end3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('stretch1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('stretch2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('stretch3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
            Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                    Container(color: Colors.blue,child: Text('baseline1', style: TextStyle(fontSize: 15))),
                    Container(color: Colors.blue,child: Text('baseline2', style: TextStyle(fontSize: 20))),
                    Container(color: Colors.blue,child: Text('baseline3', style: TextStyle(fontSize: 40))),
                  ]),
              flex: 1,
            ),
          ],
        ),
      ),
    );
  }

おわりに

初めてFlutterを触ると、Axisに関してしっくりこない感じがありました。
ですがこのようにしっかり噛み砕いて理解すればものすごくわかりやすいですね。

参考文献

kaleidot725
組み込みエンジニア ➔ Androidエンジニアになりました。なので最近は主に Android やってます。あとはサーバーサイド Kotlin もやっていこうと思っています。
https://medium.com/kaleidot725
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away