플러터(Flutter) 앱에서 레이아웃을 구성할 때 Column 위젯은 세로 방향으로 위젯을 배치하는 데 유용합니다. 이를 통해 화면을 위에서 아래로 나열하는 레이아웃을 쉽게 구현할 수 있습니다.

Column 위젯 기본 구조

Column 위젯은 자식 위젯들을 세로로 나란히 배치합니다. 아래는 Column 위젯을 생성하고 자식 위젯으로 세 개의 Container를 추가하는 간단한 예제입니다.

Column(
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 100,
    ),
    Container(
      color: Colors.green,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      height: 100,
    ),
  ],
)

위의 코드에서 Column은 세 개의 Container를 세로로 나열해서 화면에 표시합니다.

Column 속성 활용

Column 위젯은 여러가지 속성을 통해 레이아웃을 더욱 유연하게 구성할 수 있습니다.

1. mainAxisAlignment 속성
mainAxisAlignment 속성을 이용하면 자식 위젯들을 수직 방향(세로)으로 정렬할 수 있습니다. start, center, end 등의 값을 설정하여 자식 위젯들을 원하는 위치에 배치할 수 있습니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    // 자식 위젯들
  ],
)

2. crossAxisAlignment 속성
crossAxisAlignment 속성은 자식 위젯들을 수평 방향(가로)으로 정렬할 수 있게 해줍니다. start, center, end 등의 값으로 자식 위젯들을 원하는 위치에 배치할 수 있습니다.

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    // 자식 위젯들
  ],
)

3. Expanded 위젯과 함께 사용
Column의 자식들 중 일부 또는 전체가 화면의 공간을 동적으로 채우기 위해서는 Expanded 위젯을 사용할 수 있습니다.

Column(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
  ],
)

위의 예제에서 빨간색 Container는 1/3의 공간을, 초록색 Container는 2/3의 공간을 차지합니다.

마무리

플러터의 Column 위젯을 이용하면 간편하게 세로 방향의 레이아웃을 구성할 수 있습니다. 위에서 살펴본 다양한 속성들을 활용하여 다양한 디자인을 구현해보세요.