[flutter] 플러터 Column의 정렬 방법

20 Dec 2023

flutter

플러터에서 Column을 사용할 때 자식 요소들을 수직으로 정렬하는 방법은 여러 가지가 있습니다. 이 포스트에서는 주요 정렬 속성과 사용 방법에 대해 살펴보겠습니다.

주요 속성

Column 위젯은 다음과 같은 주요 정렬 속성을 제공합니다.

mainAxisAlignment: 주 축(main axis)을 따라 자식 요소들을 정렬합니다.
crossAxisAlignment: 교차 축(cross axis)을 따라 자식 요소들을 정렬합니다.

MainAxisAlignment

mainAxisAlignment는 주 축을 기준으로 자식 요소를 정렬하는 데 사용됩니다. 다음은 주요 속성 값입니다.

start: 주 축의 시작 지점에 정렬됩니다.
end: 주 축의 끝 지점에 정렬됩니다.
center: 주 축을 중앙에 정렬됩니다.
spaceBetween: 자식 요소들 사이에 동일한 간격을 둡니다.
spaceAround: 첫 번째와 마지막 자식 요소 주위에 동일한 간격을 둡니다.

CrossAxisAlignment

crossAxisAlignment는 교차 축을 기준으로 자식 요소를 정렬하는 데 사용됩니다. 다음은 주요 속성 값입니다.

start: 교차 축의 시작 지점에 정렬됩니다.
end: 교차 축의 끝 지점에 정렬됩니다.
center: 교차 축을 중앙에 정렬됩니다.
stretch: 자식 요소들을 가능한 최대 크기로 늘립니다.

사용 방법

아래의 예시 코드는 Column 위젯을 사용하여 주 축과 교차 축을 기준으로 자식 요소를 정렬하는 방법을 보여줍니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.blue,
    ),
    Container(
      height: 50,
      color: Colors.green,
    ),
    Container(
      height: 50,
      color: Colors.red,
    ),
  ],
)

위 예시 코드에서는 mainAxisAlignment를 center로, crossAxisAlignment를 start로 설정하여 자식 요소들을 주 축의 중앙에, 교차 축의 시작 부분에 정렬하고 있습니다.

플러터에서 Column의 정렬에 대한 내용을 살펴보았습니다. 다양한 속성을 활용하여 UI를 꾸밀 수 있으니, 필요에 따라 적절한 정렬 방식을 사용해 보시기 바랍니다.

더 많은 정보 및 예시는 플러터 공식 문서를 참고하시기 바랍니다.