flutter의 기본 레이아웃(Column, Row)

 생각보다 처음 flutter를 시작할때 Column과 Row를 사용하는데 애를 먹고는 했던 기억이 갑자기 나서 블로그로 남겨 볼까 한다. 사실 따로 쓰게 되면 쉽게 사용하게 되는데 필요에 따라 Column과 Row를 섞어 쓰게 될때 혼돈이 왔던거 같다.

 Column과 Row는 열과 행으로 생각하면 된다.

Column1, Column2, Column3... / Row1, Row2, Row3... 과 같이 이들은 모두 children에 들어가는 순서와 같다.

Column

 -Column은 세로용 레이아웃이라 생각하자!

Column1

Column2

Column3

Column4

Column5

 Column의 optional parameter에는 MainAxisAlignment와 CrossAxisAlignment가 존재한다. 이는 Colomn내부에서의 정렬 방식을 설정 할수 있도록 해준다.

 - MainAxisAlignment : Column의 주방향인 세로에 대한 정렬을 설정하게 된다. 

• start — 시작 정렬
• end — 끝정렬
• center— 중앙정렬
• spaceAround— 중간 여백은 동일하나, 첫번째와 마지막 여백은 중간 여백의 절반
• spaceBetween — 양 끝은 붙이고, 중간 여백만 동일하게
• spaceEvenly— 첫번째, 중간, 마지막 여백이 모두 동일하게

 - CrossAxisAlignment의 경우 : Column의 교차방향인 가로에 대한 정렬을 설정하게 된다.

• start — 시작 정렬
• end — 끝정렬
• center— 중앙정렬
• stretch — 가능한 크기만큼 자식 요소의 크기를 키운다.

 

Row

- Row는 가로용 레이아웃이라 생각하자!

Row1

Row2

Row3

Row4

Row5

Row6

 - MainAxisAlignment : Row의 주방향인 가로에 대한 정렬을 설정하게 된다.

• start — 시작 정렬
• end — 끝정렬
• center— 중앙정렬
• spaceAround— 중간 여백은 동일하나, 첫번째와 마지막 여백은 중간 여백의 절반
• spaceBetween — 양 끝은 붙이고, 중간 여백만 동일하게
• spaceEvenly— 첫번째, 중간, 마지막 여백이 모두 동일하게

 - CrossAxisAlignment의 경우 : Row의 교차방향인 세로에 대한 정렬을 설정하게 된다.

• start — 시작 정렬
• end — 끝정렬
• center— 중앙정렬
• stretch — 가능한 크기만큼 자식 요소의 크기를 키운다.

내가 짠 코드는 

github.com/eory96/blog_source_code/tree/main/flutter_app_column_row

eory96/blog_source_code

에서 확인이 가능합니다!!