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

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

## はじめに 👋

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

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

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

```dart
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),
  ],
)
```

効果：
- 要素の間に均等な余白ができる
- 端っこの余白は中間の半分になる
- 見た目：
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/0191518d-c533-aba4-7b44-fadb28e65bc5.png)


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

```dart
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),
  ],
)
```

効果：
- 端の要素は画面の端にぴったり
- 残りのスペースを均等に分配
- 見た目：
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/0aa57537-9d52-10ec-3d64-e9748c534312.png)


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

```dart
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),
  ],
)
```

効果：
- すべての余白が完全に同じ大きさ
- 見た目：
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/59295815-d358-4cb1-60f9-3c6f18aa4f79.png)


## サイズの調整：MainAxisSize 📏

### 最大サイズ（max）
```dart
Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [/*...*/],
)
```
効果：使える空間を全部使う！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/673cace0-527e-2684-443d-9d9ddbf98951.png)


### 最小サイズ（min）
```dart
Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [/*...*/],
)
```
効果：必要な分だけスペースを使う！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/a8a20606-54da-99c3-706e-7d6cb48005b0.png)


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

```dart
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`で幅の比率を調整できる
- ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/447d7d7f-3a63-9096-d450-26e53cf166f9.png)


## 特別な配置：Stretch & Baseline 📐

### Stretch（引き伸ばし）
```dart
Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Container(color: Colors.blue, width: 100),
    Container(color: Colors.red, width: 100),
  ],
)
```

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

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

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


## 方向の制御 🔄

### TextDirection（横方向）
```dart
Row(
  textDirection: TextDirection.rtl,  // 右から左
  children: [/*...*/],
)
```
- `ltr`: 左から右（普通）
- `rtl`: 右から左（逆向き）

### VerticalDirection（縦方向）
```dart
Column(
  verticalDirection: VerticalDirection.up,  // 下から上
  children: [/*...*/],
)
```
- `down`: 上から下（普通）
- `up`: 下から上（逆向き）

## やってみよう！ 💪

1. 3つの箱を均等に配置
```dart
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),
  ],
)
```

2. 真ん中の要素を2倍の大きさに
```dart
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の種類を変えてみる

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