[Flutter] Row and Column

 

mainAxis는 위젯의 기본 방향에 대한 속성이고, crossAxis는 반대방향에 대한 속성이다.

 

기본 수직으로 정렬되는 Column은 세로가 mainAxis, 가로가 crossAxis가 되며,

기본 수평으로 정렬되는 Row는 가로가 mainAxis, 세로가 crossAxis가 된다.

 

MainAxisAlignment  사용법

mainAxisAlignment: MainAxisAlignment.center

enum	Row  (좌우)	Column (상하)
center	가로 가운데정렬	세로 가운데 정렬
start	왼쪽 정렬	위쪽 정렬
end	오른쪽 정렬	아래쪽 정렬
spaceEvenly	child 위젯이 균등하게 배치되고, 위젯사이의 여백 크기만큼 양 옆에 여백이 생김.
spaceAround	child 위젯이 균등하게 배치되고, 위젯사이의 여백크기 절반만큼 양옆 여백이 생김.
spaceBetween	child 위젯이 균등하게 배치되지만, 양 옆에는 여백이 생기지 않음.

 

축 정렬할때 아래처럼 전체 배경을 기준으로 해야 한다. 

why?

아무리 정렬을 해도 왼쪽에 다 붙어있는걸로 보이므로, 아래처럼 전체 휴대폰 사이즈를 가져와서 적용한다. 

// 전체 휴대폰 사이즈를 가져와서 적용
// Column 조작할때 
width : MediaQuery.of(context).size.width,

// Row 조작할때
height : MediaQuery.of(context).size.height,

코드	width : MediaQuery.of(context).size.width	height : MediaQuery.of(context).size.height,
적용 화면

 

CrossAxisAlignment  사용법

crossAxisAlignment : CrossAxisAlignment.center

enum	Row  (상하)	Column (좌우)
center	세로 가운데정렬	가로 가운데 정렬
start	위쪽 정렬	왼쪽 정렬
end	아래쪽 정렬	오른쪽 정렬
strech	세로 가득 채움(설정된 size무시)	가로 가득 채움(설정된 size무시)
baseline	설정한 textBaseLine에 맞춰 정렬

 

mainAxisSize : 주축의 크기를 결정한다.

mainAxisSize : MainAxisSize.max

max: 최대 

min : 최소

mainxAxisSize	Row	Column
MainAxisSize.max
MainAxisSize.min

Expanded / Flexible 

주의 : Row 와 Column 의 children에만 사용가능

 

Expanded : 최대한으로 남아있는 사이트를 차지한다. 여러개에 넣으면 나눠서 차지한다.

사용법:

// red에만 적용 코드
children:[
 Expanded(
   child: Container(
 	color: Colors.red,
    width: 50.0,
    height: 50.0,
   ),
 ),
 Container(
 	color: Colors.oranage,
    width: 50.0,
    height: 50.0,
 ),
 Container(
 	color: Colors.yellow,
    width: 50.0,
    height: 50.0,
 ),
 Container(
 	color: Colors.green,
    width: 50.0,
    height: 50.0,
 ),
]

기본	red에만 적용	red,orange에만 적용	red,orange,yellow에만 적용	모두 적용

Expanded(
	flex: 2,
   child: Container(
 	color: Colors.red,
    width: 50.0,
    height: 50.0,
   ),

flex 파라미터는 기본값 1

: 나머지 공간을 나눠 먹는 비율 

 

Flexible 이 비율만큼 공간 차지 후 child 안의 위젯이 공간을 차지 안하면 공간을 버려버린다.

 

참고: https://while1.tistory.com/111  

https://www.inflearn.com/course/%ED%94%8C%EB%9F%AC%ED%84%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/unit/106181?tab=curriculum 플러터-프로젝트