『NUROアクセス』を導入してテレワーク環境の改善に成功した企業の今詳しくはこちら
63
58
@kaleidot725

［Flutter］ MainAxisAlignment と CrossAxisAlignment の利用方法

Flutter

はじめに

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

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によって開始位置が決まる)
stretch 子要素の幅また高さを埋めるように配置する

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に関してしっくりこない感じがありました。
ですがこのようにしっかり噛み砕いて理解すればものすごくわかりやすいですね。

参考文献

63
58
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
kaleidot725
組み込みエンジニア ➔ Androidエンジニアになりました。なので最近は主に Android やってます。あとはサーバーサイド Kotlin もやっていこうと思っています。
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
この記事は以下の記事からリンクされています
guevara-netFlutterでメッセージアプリのトークっぽいUIを作る【リスト編】からリンク
Ken-768【Flutter】FirebaseのAuthでEmail&パスワード認証を実装する(前半)からリンク

コメント

kaleidot725@kaleidot725

@nkdkccmbr 修正ありがとうございました。

stretchのタイポ by nkdkccmbr 2021/05/01 10:24

1
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
記事投稿イベント開催中
Microsoft Buildで発表された技術情報に関する記事を投稿しよう！
~
エンジニアによるマネジメント - エンジニアだからこそ発信できるマネジメントの知識を発信しよう
~
すべて見る