🌱Row and Column

---

flutter ui의 기본이되는 Row와 Column에 대해 알아보자.

Column

• 수직(세로) 방향으로 배치하는 위젯

Row

• 수평(가로) 방향으로 배치하는 위젯

🌳MainAxisAlignment

MainAxisAlignment는 주측 정렬으로 Column의 경우 수직(세로), Row의 경우 수평(가로)으로 막대를 끼우고 움직인다고 생각하면 된다.

MainAxisAlignment.start

• 왼쪽(위) 정렬

MainAxisAlignment.end

• 오른쪽(아래) 정렬

MainAxiAlignment.center

• 가운데 정렬

MainAxisAlignment.spaceBetween

• start, end 사이에 위젯과 위젯의 사이가 동일하게 배치

MainAxisAlignment.spaceEvenly

• 위젯을 같은 간격으로 배치하고 끝과 끝에도 위젯이 아닌 빈 간격으로 시작

MainAxisAlignment.spaceAround

• spaceEvenly + 끝과 끝 간격은 1/2

🌵사용예시

Column(
	mainAxisAlignment: MainAxisAlignment.start,
    children: [
    ...
    ],
    

🌳CrossAxisAlignment

CrossAxisAlignment는 반대측 정렬으로 Column의 경우 수평(가로), Row의 경우 수직(세로)으로 당기거나 늘린다고 생각하면 된다.

CrossAxisAlignment.start

• 시작

CrossAxisAlignment.end

• 끝

CrossAxiAlignment.center

• 가운데

CrossAxisAlignment.stretch

• 최대한으로 늘린다

🌳MainAxisSize

주측 크기

max

• 최대

min

• 최소

🌳Expanded, Flexible

Expanded

나머지 공간까지 flex 비율에 맞게 전부 차지한다.

Flexible

flex 비율에 맞게 공간을 차지한 후 나머지 공간을 버린다.

자세한 실행 결과를 보려면
https://m.blog.naver.com/cowbori/222081713773