Flutterのチュートリアルを学んでみた(9)

Flutterの配置を極めよう！AxisAlignmentマスターガイド 📏

はじめに 👋

部品を並べるだけじゃ物足りない！もっとキレイに配置したい！
そんなときに使うのがMainAxisAlignmentとCrossAxisAlignmentです。

スペースの使い方を学ぼう 🎯

1. spaceAround：みんなに余白をプレゼント 🎁

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(color: Colors.blue, width: 50, height: 50),
    Container(color: Colors.red, width: 50, height: 50),
    Container(color: Colors.green, width: 50, height: 50),
  ],
)

効果：

• 要素の間に均等な余白ができる
• 端っこの余白は中間の半分になる
• 見た目：
• 

2. spaceBetween：端っこピッタリ！ 📌

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(color: Colors.blue, width: 50, height: 50),
    Container(color: Colors.red, width: 50, height: 50),
    Container(color: Colors.green, width: 50, height: 50),
  ],
)

効果：

• 端の要素は画面の端にぴったり
• 残りのスペースを均等に分配
• 見た目：
• 

3. spaceEvenly：完全均等配置！ ⚖️

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Container(color: Colors.blue, width: 50, height: 50),
    Container(color: Colors.red, width: 50, height: 50),
    Container(color: Colors.green, width: 50, height: 50),
  ],
)

効果：

• すべての余白が完全に同じ大きさ
• 見た目：
• 

サイズの調整：MainAxisSize 📏

最大サイズ（max）

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [/*...*/],
)

効果：使える空間を全部使う！

最小サイズ（min）

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [/*...*/],
)

効果：必要な分だけスペースを使う！

要素を均等に広げる：Expanded 🌈

Row(
  children: <Widget>[
    Expanded(
      child: Container(color: Colors.blue),
    ),
    Expanded(
      flex: 2,  // 2倍の幅！
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.green),
    ),
  ],
)

効果：

• 要素が使える空間いっぱいに広がる
• flexで幅の比率を調整できる
• 

特別な配置：Stretch & Baseline 📐

Stretch（引き伸ばし）

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Container(color: Colors.blue, width: 100),
    Container(color: Colors.red, width: 100),
  ],
)

効果：要素が縦いっぱいに伸びる！

Baseline（文字揃え）

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: <Widget>[
    Text('大きい文字', style: TextStyle(fontSize: 30)),
    Text('小さい文字', style: TextStyle(fontSize: 15)),
  ],
)

効果：文字の基準線が揃う！

方向の制御 🔄

TextDirection（横方向）

Row(
  textDirection: TextDirection.rtl,  // 右から左
  children: [/*...*/],
)

• ltr: 左から右（普通）
• rtl: 右から左（逆向き）

VerticalDirection（縦方向）

Column(
  verticalDirection: VerticalDirection.up,  // 下から上
  children: [/*...*/],
)

• down: 上から下（普通）
• up: 下から上（逆向き）

やってみよう！ 💪

1. 3つの箱を均等に配置

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(color: Colors.blue, width: 50, height: 50),
    Container(color: Colors.red, width: 50, height: 50),
    Container(color: Colors.green, width: 50, height: 50),
  ],
)

1. 真ん中の要素を2倍の大きさに

Row(
  children: [
    Expanded(child: Container(color: Colors.blue)),
    Expanded(flex: 2, child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.green)),
  ],
)

困ったときは？ 🆘

• 要素が見えない
  → MainAxisSizeを確認
• 配置がおかしい
  → CrossAxisAlignmentを確認
• スペースが思い通りじゃない
  → MainAxisAlignmentの種類を変えてみる

これで君もレイアウトの達人！
素敵なアプリを作ってみよう！ 🎨