플러터에서 Row, Column, Vertical, Horizontal 차이와 사용법 가이드

 

플러터에서 레이아웃을 구성할 때 가장 기본적으로 사용하는 요소 중 하나는 바로 Row, Column, Vertical, Horizontal입니다.

이 요소들은 모두 자식 위젯들을 특정 방향으로 배치하는 데 사용되지만, 미묘한 차이점과 사용 상황에 따라 적절하게 선택해야 합니다.

이 블로그 글에서는 Row, Column, Vertical, Horizontal의 차이점을 명확하게 비교하고, 각 요소의 특징과 사용법, 그리고 언제 어떤 것을 선택해야 하는지에 대한 가이드를 제공합니다.

 

1. Row vs Column

• Row: 자식 위젯들을 가로 방향으로 왼쪽에서 오른쪽 순서대로 배치합니다. 마치 한 줄로 나열하는 것과 같습니다.
• Column: 자식 위젯들을 세로 방향으로 위에서 아래 순서대로 배치합니다. 마치 여러 줄을 쌓아 올리는 것과 같습니다.

예시

// Row 예시
Row(
  children: <Widget>[
    Text('텍스트 1'),
    SizedBox(width: 16.0), // 간격 추가
    Text('텍스트 2'),
  ],
),

// Column 예시
Column(
  children: <Widget>[
    Text('텍스트 1'),
    SizedBox(height: 16.0), // 간격 추가
    Text('텍스트 2'),
  ],
),

 

2. Vertical vs Horizontal

• Vertical: Column과 동일하게 자식 위젯들을 세로 방향으로 배치합니다. 별도의 위젯으로 정의되어 있지는 않지만, Column 대신 Vertical을 사용하는 경우도 있습니다.
• Horizontal: Row와 동일하게 자식 위젯들을 가로 방향으로 배치합니다. 별도의 위젯으로 정의되어 있지는 않지만, Row 대신 Horizontal을 사용하는 경우도 있습니다.

사용법

• Vertical과 Horizontal은 별도의 위젯 클래스로 정의되어 있지는 않지만, Column과 Row 대신 사용될 수 있습니다. 예를 들어, 코드 가독성을 위해 Vertical이나 Horizontal을 사용하는 것이 더 적합하다고 판단되면 사용해도 무방합니다.
• 다만, Vertical과 Horizontal은 공식적인 위젯 클래스가 아니기 때문에, Column과 Row만 제공하는 일부 속성이나 기능을 사용하지 못할 수 있습니다.

3. 언제 어떤 것을 사용해야 할까요?

• 가로 방향으로 위젯들을 나열해야 하는 경우: Row 위젯을 사용합니다.
• 세로 방향으로 위젯들을 나열해야 하는 경우: Column 위젯을 사용합니다.
• 코드 가독성을 위해 Vertical이나 Horizontal을 사용하고 싶은 경우: Vertical 또는 Horizontal을 사용해도 무방합니다. 다만, Column과 Row만 제공하는 일부 속성이나 기능을 사용하지 못할 수 있다는 점을 유의해야 합니다.

4. 추가 정보

• Column과 Row 위젯은 자식 위젯들을 균등하게 공간을 차지하도록 합니다. 특정 위젯에 더 많은 공간을 할당하고 싶으면 Expanded 위젯이나 Flexible 위젯을 사용해야 합니다.
• Column과 Row 위젯은 기본적으로 스크롤 기능을 제공하지 않습니다. 자식 위젯들이 화면을 넘칠 경우, ListView나 GridView와 같은 위젯을 사용하여 스크롤 기능을 구현해야 합니다.