플러터 Column과 Row 위젯 사용법 완벽 가이드

 

플러터에서 레이아웃을 구성하는 데 가장 기본적인 위젯 중 하나는 바로 Column과 Row 위젯입니다.

Column 위젯은 자식 위젯들을 세로 방향으로 나열하고, Row 위젯은 자식 위젯들을 가로 방향으로 나열하는 데 사용됩니다.

이 블로그 글에서는 Column과 Row 위젯의 사용법과 주요 옵션들을 자세히 살펴보고, 실제 코드 예시와 함께 다양한 배치 구현 방법을 알아보겠습니다.

 

1. Column 위젯

 

Column 위젯은 자식 위젯들을 위에서 아래로 순서대로 배치합니다.

기본적으로 자식 위젯들은 균등하게 공간을 차지하지만, mainAxisAlignment 속성을 사용하여 정렬 방식을 조정할 수 있습니다.

또한, crossAxisAlignment 속성을 사용하여 자식 위젯들을 가로축 기준으로 정렬 방식을 조정할 수 있습니다.

 

Column 위젯 주요 속성

• mainAxisAlignment: 자식 위젯들의 가로축 정렬 방식을 설정합니다. start, center, end, spaceBetween, spaceAround 등의 값을 사용할 수 있습니다. 기본값은 start입니다.
• crossAxisAlignment: 자식 위젯들의 세로축 정렬 방식을 설정합니다. start, center, end, stretch 등의 값을 사용할 수 있습니다. 기본값은 start입니다.

Column 위젯 사용 예시

Column(
  mainAxisAlignment: MainAxisAlignment.center, // 가로축 중앙 정렬
  crossAxisAlignment: CrossAxisAlignment.stretch, // 세로축 양쪽 끝까지 채우기
  children: <Widget>[
    Text('텍스트 1'),
    Text('텍스트 2'),
    Text('텍스트 3'),
  ],
),

 

2. Row 위젯

 

Row 위젯은 자식 위젯들을 왼쪽에서 오른쪽으로 순서대로 배치합니다. Column 위젯과 마찬가지로, mainAxisAlignment 속성을 사용하여 정렬 방식을 조정하고, crossAxisAlignment 속성을 사용하여 자식 위젯들을 세로축 기준으로 정렬 방식을 조정할 수 있습니다.

 

Row 위젯 주요 속성

• mainAxisAlignment: 자식 위젯들의 가로축 정렬 방식을 설정합니다. start, center, end, spaceBetween, spaceAround 등의 값을 사용할 수 있습니다. 기본값은 start입니다.
• crossAxisAlignment: 자식 위젯들의 세로축 정렬 방식을 설정합니다. start, center, end, stretch 등의 값을 사용할 수 있습니다. 기본값은 start입니다.

Row 위젯 사용 예시

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 가로축 양쪽 끝에 공간 배치
  crossAxisAlignment: CrossAxisAlignment.center, // 세로축 중앙 정렬
  children: <Widget>[
    Icon(Icons.home),
    Text('홈'),
    Icon(Icons.person),
    Text('프로필'),
  ],
),

 

3. Column과 Row 위젯 활용 실제 예시

 

다음은 Column과 Row 위젯을 활용하여 간단한 레이아웃을 구성하는 실제 코드 예시입니다.

 

예시 1: 간단한 목록 구성

Column(
  children: <Widget>[
    ListTile(
      title: Text('제목 1'),
      subtitle: Text('내용 1'),
    ),
    ListTile(
      title: Text('제목 2'),
      subtitle: Text('내용 2'),
    ),
    ListTile(
      title: Text('제목 3'),
      subtitle: Text('내용 3'),
    ),
  ],
),

 

예시 2: 버튼 그룹 구성

 

Row(
  mainAxisAlignment: MainAxisAlignment.center, // 가로축 중앙 정렬
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Text('버튼 1'),
    ),
    SizedBox(width: 16.0), // 버튼 사이에 간격 추가
    ElevatedButton(
      onPressed: () {},
      child: Text('버튼 2'),
    ),
  ],
),

 

3. Column과 Row 위젯 활용 실제 예시

ElevatedButton(
  onPressed: () {},
  child: Text('버튼 2'),
),
],
),

 

4. 더 다양한 배치 구현

 

Column과 Row 위젯을 혼합하여 사용하거나, Expanded 위젯, Flexible 위젯, AspectRatio 위젯 등을 활용하면 더욱 다양하고 복잡한 레이아웃을 구현할 수 있습니다.

• 여러 열/행 구성: Column과 Row 위젯을 혼합하여 여러 열 또는 행을 구성할 수 있습니다.
• 특정 위젯 확장: Expanded 위젯을 사용하면 특정 위젯을 나머지 공간을 채우도록 할 수 있습니다.
• 비율 유지: AspectRatio 위젯을 사용하면 자식 위젯의 가로세로 비율을 유지할 수 있습니다.

5. 주의 사항

• Column과 Row 위젯은 자식 위젯들을 한 줄로 나열하기 때문에, 자식 위젯들이 너무 많으면 스크롤이 필요할 수 있습니다. 이런 경우, ListView나 GridView와 같은 위젯을 사용하는 것이 좋습니다.
• Column과 Row 위젯은 기본적으로 자식 위젯들을 균등하게 공간을 차지하도록 합니다. 특정 위젯에 더 많은 공간을 할당하고 싶으면 Expanded 위젯이나 Flexible 위젯을 사용해야 합니다.