[Flutter / 플러터] 레이아웃 정렬하기 (MainAxisAlignment)

1. Aligning Widget

  - 플러터 레이아웃을 짜는데 가장 흔하게 사용되는 Api 중 하나이다.

  - 그중 MainAxisAlignment 를 알아보도록 하겠다.

  - MainAxisAlignment 의 Enum(종류)

Enum(상수값)	Row(행)	Column(열)
center	가로축 기준 중앙정렬	세로축 기준 중앙정렬
end	가로축 기준 우측정렬	세로축 기준 하단정렬
start	가로축 기준 좌측정렬	세로축 기준 상단정렬
spaceAround	첫 번째와 마지막 child 앞뒤에 여유공간을 나머지 child와 공간의 절반만큼 배치
spaceBetween	child widget을 시작과 끝에 배치, 시작과 끝 widget 사이 공간은 균등하게 배치
spaceEvenly	child widget 사이의 공간을 균등하게 배치

2. Row 세로 정렬 방법

Row(행) 사용시, 주 축(mainAxis)는 수평이며, 횡 축(crossAxis)는 세로이다.

  - MainAxisAlignment.start

가로축 기준 좌측 정렬

  - MainAxisAlignment.center

  - MainAxisAlignment.end

  - MainAxisAlignment.spaceEvenly

첫 번째와 마지막 child 앞뒤에 여유공간을 나머지 child와 공간의 절반만큼 배치

  - MainAxisAlignment.spaceAround

child widget을 시작과 끝에 배치, 시작과 끝 widget 사이 공간은 균등하게 배치

  - MainAxisAlignment.spaceBetween

child widget 사이의 공간을 균등하게 배치

3. Column 가로 정렬 방법

  - MainAxisAlignment.start

세로축 기준 중앙정렬

  - MainAxisAlignment.center

세로축 기준 중앙정렬

  - MainAxisAlignment.end

세로축 기준 하단정렬

  - MainAxisAlignment.spaceAround

첫 번째와 마지막 child 앞뒤에 여유공간을 나머지 child와 공간의 절반만큼 배치

  - MainAxisAlignment.spaceBetween

child widget을 시작과 끝에 배치, 시작과 끝 widget 사이 공간은 균등하게 배치

  - MainAxisAlignment.spaceEvenly

child widget 사이의 공간을 균등하게 배치