[Flutter #3] Row와 Column 위젯

1. Column

Column(
  children: [
    Text('첫 번째 위젯'),
    Text('두 번째 위젯'),
    Text('세 번째 위젯'),
  ],
)

📌 사용 예시

• 회원가입 폼 입력 UI

• 세로로 길게 나열되는 뉴스 피드

• 버튼 여러 개를 세로로 배치할 때

2. Row

Row(
  children: [
    Icon(Icons.home),
    Text('홈'),
    Icon(Icons.search),
  ],
)

📌 사용 예시

• 앱 상단의 탭 메뉴

• 하단의 네비게이션 바

• 아이콘과 텍스트를 함께 보여줄 때

3. Row와 Column의 차이 이해하기

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

결과:

• mainAxisAlignment.center → 가로 방향으로 가운데 정렬

• crossAxisAlignment.start → 세로 방향의 시작점(위쪽)에서 배치

4. Spacer 위젯

Row(
  children: [
    Text('왼쪽'),
    Spacer(), // 남는 공간을 차지
    Text('오른쪽'),
  ],
)

결과: 왼쪽과 오른쪽이 양 끝으로 배치됩니다.

Spacer가 중간의 모든 여백을 흡수하기 때문입니다.

5. Row + Column 혼합 사용

Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('왼쪽'),
        Text('오른쪽'),
      ],
    ),
    SizedBox(height: 20), // 간격 추가
    Text('아래에 위치하는 텍스트'),
  ],
)

⚠ 주의점

• Row와 Column을 함께 사용할 때는 전체 화면을 꽉 채우는 위젯을 넣어주지 않으면,
예상치 못한 정렬 문제가 발생할 수 있습니다.

• 이럴 땐 Expanded나 Flexible을 고려하세요.

6. Padding 쉽게 적용하기

• 맥(Mac): Option + Enter

• 윈도우: Alt + Enter

예시

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text('Padding 적용'),
)

Option + Enter → Wrap with Padding 선택

반대로 제거할 때도 Option + Enter → Remove this widget 선택

7. Flutter DevTools 활용

Flutter DevTools 실행 → Layout Inspector 탭 활용

위젯이 어떤 크기와 위치를 차지하는지 실시간으로 분석 가능

8. 정리

• Row → 가로 방향 배치

• Column → 세로 방향 배치

• mainAxis와 crossAxis를 이해해야 레이아웃 설계 가능

• Spacer로 가변 여백 처리

• 복잡한 레이아웃은 Row + Column 중첩

• 단축키로 Padding 쉽게 적용/삭제

• Flutter DevTools로 시각적으로 디버깅

9. 결론

Next Step:

• Expanded와 Flexible을 활용한 공간 분배

• Stack 위젯으로 겹치는 UI 만들기

• Align과 Positioned로 정밀 배치