플러터(Flutter)에서 UI를 구성할 때, 여러 위젯들을 세로로 배열하고 싶을 때가 있습니다. 예를 들면, 메뉴 항목이나 설정 화면 등을 구성할 때 세로로 배열해야 할 때가 있습니다. 이때 Column 위젯을 사용하면 간단하게 이를 구현할 수 있습니다.

Column 위젯

Column은 자식 위젯들을 세로로 배열하는 위젯입니다. 각 자식 위젯은 세로로 쌓이게 되고, 좌우 정렬을 통해 레이아웃을 구성할 수 있습니다.

플러터에서 Column을 사용하는 방법은 매우 간단합니다. 다음은 Column을 사용하여 두 개의 메뉴 항목을 세로로 배열한 예제 코드입니다.

Column(
  children: <Widget>[
    Text('홈'),
    Text('설정'),
  ],
)

CrossAxisAlignment와 MainAxisAlignment

Column의 자식 위젯들을 정렬할 때 사용되는 두 가지 중요한 속성이 있습니다.

• CrossAxisAlignment: Column의 가로에서의 정렬 방식을 지정합니다.
• MainAxisAlignment: Column 내부에서 자식 위젯을 세로로 정렬하는 방식을 지정합니다.

예를 들어, CrossAxisAlignment를 시작점으로, MainAxisAlignment를 공간을 동일하게 분할하여 자식 위젯을 세로로 정렬하도록 지정할 수 있습니다.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('홈'),
    Text('설정'),
  ],
)

Column을 사용하여 세로 메뉴를 구성할 때에는 MainAxisAlignment와 CrossAxisAlignment를 적절히 활용하여 원하는 레이아웃을 구현할 수 있습니다.

결론

Column은 빠르고 간편하게 여러 위젯들을 세로로 배열할 수 있는 플러터의 기본적인 레이아웃 위젯입니다. 이를 사용하여 메뉴나 리스트 등을 구성할 때에 유용하게 활용할 수 있습니다.

플러터의 Column에 대해 더 알아보려면 공식 문서를 참고하시기 바랍니다.