FlutterのMain AxisとCross Axisを一発で覚えるには

公式の以下の図で一発で覚えられます。
RowかColumnかで軸が入れ替わるのでややこしいですが、こうした図にしてもらえると助かりますね

Flutterは公式ドキュメントが充実していてめちゃくちゃ助かる・・・
https://flutter.dev/docs/development/ui/layout

自分でサンプル書いてみる

わかりやすいMainAxisで書いてみた。

Rowを3つ並べてMainAxisAlignmentで調整

import 'package:flutter/material.dart';

class AxisSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: SafeArea(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              width: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              color: Colors.green,
            )
          ],
        ),
      ),
    );
  }
}

Columnを3つ並べてMainAxisAlignmentで調整

import 'package:flutter/material.dart';

class AxisSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              height: 100,
              color: Colors.red,
            ),
            Container(
              height: 100,
              color: Colors.blue,
            ),
            Container(
              height: 100,
              color: Colors.green,
            )
          ],
        ),
      ),
    );
  }
}

Rowを3つ並べてCrossAxisAlignmentで調整

CrossAxisAlignmentの値でContainerの位置が動いているのがわかるようにしてみた。なお、元ネタは~~公式ドキュメント~~

• CrossAxisAlignment.start

import 'package:flutter/material.dart';

class AxisSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: SafeArea(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child:Container(
                height: 100,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.blue,
              ),
            ),
            Expanded(
              child: Container(
                height: 100,
                color: Colors.green,
              ),
            )
          ],
        ),
      ),
    );
  }
}

• CrossAxisAlignment.end

import 'package:flutter/material.dart';

class AxisSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: SafeArea(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Expanded(
              child:Container(
                height: 100,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.blue,
              ),
            ),
            Expanded(
              child: Container(
                height: 100,
                color: Colors.green,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Columnを3つ並べてCrossAxisAlignmentで調整

• CrossAxisAlignment.start

import 'package:flutter/material.dart';

class AxisSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child:Container(
                width: 100,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.blue,
              ),
            ),
            Expanded(
              child: Container(
                width: 100,
                color: Colors.green,
              ),
            )
          ],
        ),
      ),
    );
  }
}

• CrossAxisAlignment.end

import 'package:flutter/material.dart';

class AxisSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Expanded(
              child:Container(
                width: 100,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.blue,
              ),
            ),
            Expanded(
              child: Container(
                width: 100,
                color: Colors.green,
              ),
            )
          ],
        ),
      ),
    );
  }
}

参考

• Layouts in Flutter - Flutter