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

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

はじめに 👋

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

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

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

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

これで、青い箱と赤い箱が横に並びます！

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

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

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

これで、青い箱の下に赤い箱が並びます！
こんな感じです：

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

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

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), // オレンジの箱
      ],
    ),
  ],
)

これで作れるのはこんなレイアウト：

位置を調整しよう！ 🎯

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

縦並び（Column）の場合：

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）

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つの箱を横に並べる

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

1. 2x2のグリッドを作る

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を確認
• 要素が見えない
  → 色が設定されているか確認