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

# FlutterのColumnとRow：縦並びと横並びの魔法！ 📱

## はじめに 👋

積み木で遊んだことありますか？
積み木を縦に積んだり、横に並べたりしますよね。
Flutterの`Column`と`Row`も同じように、部品を縦や横に並べることができるんです！

## Row（横並び）の作り方 ⬅️➡️

まずは横並びから挑戦してみましょう：

```dart
Row(
  children: <Widget>[
    Container(color: Colors.blue, width: 100, height: 100),  // 青い箱
    Container(color: Colors.red, width: 100, height: 100),   // 赤い箱
  ],
)
```

これで、青い箱と赤い箱が横に並びます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/d4eb219a-bc13-5f8a-3683-83c42a44d117.png)


## Column（縦並び）の作り方 ⬆️⬇️

今度は縦に並べてみましょう：

```dart
Column(
  children: <Widget>[
    Container(color: Colors.blue, width: 100, height: 100),  // 青い箱
    Container(color: Colors.red, width: 100, height: 100),   // 赤い箱
  ],
)
```

これで、青い箱の下に赤い箱が並びます！
こんな感じです：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/bceca6a5-bd41-4f52-b5fe-f0780b0e29a8.png)


## 組み合わせて使ってみよう！ 🎯

ColumnとRowは組み合わせることもできます：

```dart
Row(
  children: <Widget>[
    Column(
      children: <Widget>[
        Container(color: Colors.blue, width: 100, height: 100),   // 青い箱
        Container(color: Colors.red, width: 100, height: 100),    // 赤い箱
      ],
    ),
    Column(
      children: <Widget>[
        Container(color: Colors.green, width: 100, height: 100),  // 緑の箱
        Container(color: Colors.orange, width: 100, height: 100), // オレンジの箱
      ],
    ),
  ],
)
```

これで作れるのはこんなレイアウト：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/03a0fa75-dcaa-f785-95aa-764929a05009.png)


## 位置を調整しよう！ 🎯

### メインの軸での調整（mainAxisAlignment）

縦並び（Column）の場合：
```dart
Column(
  mainAxisAlignment: MainAxisAlignment.center,  // 真ん中に配置
  children: <Widget>[
    Container(color: Colors.blue, width: 100, height: 100),
    Container(color: Colors.red, width: 100, height: 100),
  ],
)
```

選べる位置：
- `MainAxisAlignment.start`：上から（左から）
- `MainAxisAlignment.center`：真ん中
- `MainAxisAlignment.end`：下から（右から）

### 交差軸での調整（crossAxisAlignment）

```dart
Row(
  crossAxisAlignment: CrossAxisAlignment.center,  // 縦方向の真ん中に
  children: <Widget>[
    Container(color: Colors.blue, width: 100, height: 100),
    Container(color: Colors.red, width: 100, height: 100),
  ],
)
```

選べる位置：
- `CrossAxisAlignment.start`：始点
- `CrossAxisAlignment.center`：中央
- `CrossAxisAlignment.end`：終点

## 覚えておくポイント 🌟

1. Rowは横並び（→）
2. Columnは縦並び（↓）
3. mainAxisAlignmentは：
   - Columnなら↕️（上下）方向
   - Rowなら↔️（左右）方向
4. crossAxisAlignmentは：
   - Columnなら↔️（左右）方向
   - Rowなら↕️（上下）方向

## やってみよう！ 💪

1. 3つの箱を横に並べる
```dart
Row(
  children: <Widget>[
    Container(color: Colors.blue, width: 100, height: 100),
    Container(color: Colors.red, width: 100, height: 100),
    Container(color: Colors.green, width: 100, height: 100),
  ],
)
```

2. 2x2のグリッドを作る
```dart
Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Container(color: Colors.blue, width: 100, height: 100),
        Container(color: Colors.red, width: 100, height: 100),
      ],
    ),
    Row(
      children: <Widget>[
        Container(color: Colors.green, width: 100, height: 100),
        Container(color: Colors.yellow, width: 100, height: 100),
      ],
    ),
  ],
)
```

## 困ったときは？ 🆘

- 要素が画面からはみ出る
  → Containerのサイズを調整
- 配置がおかしい
  → mainAxisAlignmentとcrossAxisAlignmentを確認
- 要素が見えない
  → 色が設定されているか確認