[flutter] Row 위젯에서의 정렬 방법 설정하기

07 Dec 2023

flutter

Flutter에서 Row 위젯을 사용하면 다중 위젯을 가로로 정렬할 수 있습니다. 하지만 때로는 Row 위젯 안에 있는 위젯들을 특정 방법으로 정렬해야 할 수도 있습니다. 이번 블로그 포스트에서는 Flutter의 Row 위젯에서 사용할 수 있는 정렬 방법에 대해 알아보겠습니다.

MainAxisAlignment

Row 위젯에서 위젯들을 수평 방향으로 정렬하는 방법을 설정할 수 있는 속성입니다. MainAxisAlignment 열거형을 사용하여 정렬 방식을 선택할 수 있습니다. 여러 가지 옵션이 있으며 주로 사용되는 옵션들은 다음과 같습니다.

start: 왼쪽으로 정렬됩니다.
end: 오른쪽으로 정렬됩니다.
center: 가운데 정렬됩니다.
spaceBetween: 첫 번째와 마지막 위젯은 양 끝으로 정렬되고 나머지 위젯들은 균등하게 간격을 두고 정렬됩니다.
spaceAround: 모든 위젯들은 균등하게 간격을 두고 정렬됩니다.

아래는 MainAxisAlignment를 사용하여 Row 위젯의 정렬 방법을 설정한 예제입니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
  ],
)

이 예제에서는 Row 위젯 안에 있는 세 개의 Container 위젯을 “spaceBetween” 정렬 방식으로 정렬하고 있습니다. 첫 번째와 마지막 위젯은 양 끝으로 정렬되고 나머지 위젯들은 균등한 간격을 가지며 정렬됩니다.

CrossAxisAlignment

Row 위젯에서 위젯들을 수직 방향으로 정렬하는 방법을 설정할 수 있는 속성입니다. CrossAxisAlignment 열거형을 사용하여 정렬 방식을 선택할 수 있습니다. 일반적으로 사용되는 옵션은 다음과 같습니다.

start: 위쪽으로 정렬됩니다.
end: 아래쪽으로 정렬됩니다.
center: 중앙으로 정렬됩니다.
baseline: 텍스트의 기준선을 가지고 정렬됩니다.
stretch: 위젯의 높이를 늘려서 맞춤 (디폴트 값)

아래는 CrossAxisAlignment를 사용하여 Row 위젯의 정렬 방법을 설정한 예제입니다.

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
  ],
)

이 예제에서는 Row 위젯 안에 있는 세 개의 Container 위젯을 “center” 정렬 방식으로 정렬하고 있습니다. 위젯들이 수직 방향으로 중앙으로 정렬됩니다.

요약

Flutter의 Row 위젯에서는 MainAxisAlignment와 CrossAxisAlignment를 사용하여 위젯들의 가로 및 세로 정렬 방식을 설정할 수 있습니다. 위젯들을 원하는 방향으로 정렬해야하는 경우 이러한 속성들을 활용할 수 있습니다.

더 자세한 정보는 Flutter 공식 문서를 참조하시기 바랍니다.