[Flutter 트랙] 앱개발 종합반 2-9 - Row Column

이번 시간에는 Flutter에서 가장 많이 사용되는 레이아웃 위젯인 Row와 Column 위젯을 살펴보겠습니다.

이 두 가지 위젯을 잘 활용하면 거의 모든 UI 구성이 가능합니다.

1. Row 위젯

Row 위젯은 **가로 방향**으로 위젯들을 배치하는 데 사용됩니다.

Row(
  children: [
    Container(width: 40, height: 40, color: Colors.red),
    Container(width: 40, height: 40, color: Colors.green),
    Container(width: 40, height: 40, color: Colors.blue),
  ],
)

위 코드를 실행하면 **가로로 정렬된 박스** 3개가 나타납니다.

2. Row의 정렬 옵션 (MainAxisAlignment)

Row에서는 `mainAxisAlignment` 속성을 사용하여 위젯의 정렬을 조정할 수 있습니다.

• MainAxisAlignment.start - 왼쪽 정렬 (기본값)
• MainAxisAlignment.center - 중앙 정렬
• MainAxisAlignment.end - 오른쪽 정렬
• MainAxisAlignment.spaceBetween - 양 끝 정렬 후, 사이 간격 균등 배치
• MainAxisAlignment.spaceAround - 양 끝 여백 포함 간격 균등 배치
• MainAxisAlignment.spaceEvenly - 모든 간격을 균등하게 배치

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

➡️ `spaceBetween`을 사용하면 양 끝 정렬 후 **균등한 간격**이 적용됩니다.

3. Row의 높이 조정 (CrossAxisAlignment)

Row는 기본적으로 높이가 **자식 위젯들의 최대 높이에 맞춰집니다**. 하지만 `crossAxisAlignment` 속성을 활용하면 조정할 수 있습니다.

• CrossAxisAlignment.start - 위쪽 정렬
• CrossAxisAlignment.center - 중앙 정렬 (기본값)
• CrossAxisAlignment.end - 아래쪽 정렬
• CrossAxisAlignment.stretch - 부모 크기에 맞춰 늘리기

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(width: 40, height: 50, color: Colors.red),
    Container(width: 40, height: 100, color: Colors.green),
    Container(width: 40, height: 150, color: Colors.blue),
  ],
)

➡️ `stretch`를 사용하면 **모든 컨테이너가 동일한 높이로 조정**됩니다.

4. Column 위젯

Column 위젯은 **세로 방향**으로 위젯을 배치하는 데 사용됩니다.

Column(
  children: [
    Container(width: 100, height: 40, color: Colors.red),
    Container(width: 100, height: 40, color: Colors.green),
    Container(width: 100, height: 40, color: Colors.blue),
  ],
)

➡️ Row와 거의 동일한 방식으로 동작하지만 **세로 정렬**된다는 점이 다릅니다.

5. Column의 정렬 옵션 (MainAxisAlignment)

Column에서는 `mainAxisAlignment`를 사용하여 **세로 정렬**을 조정할 수 있습니다.

• MainAxisAlignment.start - 위쪽 정렬 (기본값)
• MainAxisAlignment.center - 중앙 정렬
• MainAxisAlignment.end - 아래쪽 정렬
• MainAxisAlignment.spaceBetween - 위젯 간 간격 균등 배치
• MainAxisAlignment.spaceAround - 위젯 간 및 바깥 여백 포함 균등 배치
• MainAxisAlignment.spaceEvenly - 모든 간격을 균등하게 배치

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(width: 100, height: 40, color: Colors.red),
    Container(width: 100, height: 40, color: Colors.green),
    Container(width: 100, height: 40, color: Colors.blue),
  ],
)

➡️ `spaceEvenly`를 사용하면 **모든 간격이 동일하게 조정**됩니다.

6. Column의 가로 정렬 (CrossAxisAlignment)

• CrossAxisAlignment.start - 왼쪽 정렬
• CrossAxisAlignment.center - 중앙 정렬 (기본값)
• CrossAxisAlignment.end - 오른쪽 정렬
• CrossAxisAlignment.stretch - 부모 크기에 맞춰 늘리기

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 80, height: 40, color: Colors.red),
    Container(width: 100, height: 40, color: Colors.green),
    Container(width: 120, height: 40, color: Colors.blue),
  ],
)

➡️ `center`를 사용하면 **가운데 정렬**됩니다.

7. 부모 크기 설정 (SizedBox 활용)

부모 크기를 지정하려면 **SizedBox**를 활용할 수 있습니다.

SizedBox(
  width: 200,
  height: 300,
  child: Column(
    children: [
      Container(width: 100, height: 50, color: Colors.red),
      Container(width: 100, height: 50, color: Colors.green),
      Container(width: 100, height: 50, color: Colors.blue),
    ],
  ),
)

➡️ `SizedBox`를 사용하여 부모 크기를 지정할 수 있습니다.

8. 결론

• Row는 **가로 정렬**, Column은 **세로 정렬**
• MainAxisAlignment는 **주 방향 정렬**을 결정
• CrossAxisAlignment는 **반대 방향 정렬**을 결정
• SizedBox를 활용하여 **부모 크기를 조정 가능**

➡️ **다음 강의에서는 Expanded 위젯을 살펴보겠습니다.**