📐 Flutter Row & Column 위젯 완전 정복

Flutter에서 레이아웃을 만들 때 가장 핵심이 되는 두 가지 위젯이 있습니다.
바로 Row와 Column입니다. 가로/세로 방향으로 위젯을 배치할 수 있는 UI의 골격이죠.

---

🔀 기본 개념

• Row: 위젯을 가로 방향으로 배치
• Column: 위젯을 세로 방향으로 배치

Row(
  children: [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

Column(
  children: [
    Text('1'),
    Text('2'),
    Text('3'),
  ],
)

---

🎯 정렬 옵션: MainAxis vs CrossAxis

속성	Row 기준	Column 기준
mainAxisAlignment	가로 방향 정렬	세로 방향 정렬
crossAxisAlignment	세로 방향 정렬	가로 방향 정렬

---

📌 자주 쓰는 정렬 예시

// Row 내부 요소를 중앙 정렬
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.star),
    SizedBox(width: 8),
    Text('별점 주기'),
  ],
)

---

🧠 주의할 점

• Row/Column은 기본적으로 children을 "크기만큼만" 차지
• 넘치면 오류 발생! → Expanded나 SizedBox로 조절 필요

// Expanded를 이용한 비율 나누기
Row(
  children: [
    Expanded(child: Container(color: Colors.red, height: 50)),
    Expanded(child: Container(color: Colors.blue, height: 50)),
  ],
)

---

📌 마무리 정리

• Row = 가로 정렬, Column = 세로 정렬
• mainAxisAlignment / crossAxisAlignment로 정렬 제어
• Expanded, SizedBox로 레이아웃 완성도 높이기

---

📌 다음 편 예고

• 👉 4편: ListView 위젯 완전 정복 – 스크롤 가능한 리스트 UI 만들기