[003] 플러터 (Flutter) 배우기 - Container, Row, Column (컨테이너, 행렬)

안녕하세요~ Totally 개발자입니다.

 

이번 시간에는 Container, Row, Column에 관련하여 설명하고자 합니다.

 

 

Container 위젯

 

먼저 Container widget은 HTML의 div 태그 용도처럼 광범위하게 쓰이며 margin, border, padding, child(content)의 속성을 가집니다. 아래처럼 width, height, color 등의 속성도 제공하여 스타일 및 크기 등을 지정할 수 있으며 child 속성에 Text 등의 다양한 위젯을 추가할 수 있습니다.

 

 

Row 위젯

 

Row 위젯은 한 행에 여러가지 열의 위젯들을 배치할 때 사용하며 children속성에 배열 형태로 위젯들을 지정할 수 있습니다.

 

 

Row 위젯은 여러가지 속성들을 제공하고 있는데, 그 중 많이 쓰이는 한 가지가 mainAxisAlignment입니다. 이것을 활용하여 row 메인축의 정렬을 지정할 수 있습니다. 아래 소스에서는 중앙에 정렬하는 방법이며 start(시작 정렬), end(끝 정렬), spaceAround(맨앞, 맨뒤를 포함한 동일한 공간을 주는 정렬), spaceBetween(요소 사이에만 동일한 공간을 주는 정렬), spaceEvenly(모든 부분에 동일한 공간을 주는 정렬)이 있으며 정렬이 필요한 방식으로 지정하여 사용하시면 됩니다.

 

 

Column 위젯

 

Row가 가로행에 여러 열을 배치하는 것이었다면, Column 위젯은 한 열에 여러 행을 배치하는 목적으로 쓰입니다. Row와 동일하게 children의 속성을 가지며 배열 형태로 지정하여야 합니다. 참고로 여기에서는 가로 행을 정렬하기 위해 crossAxisAlignment을 사용하였는데 mainAxisAlignment와 crossAlignment의 차이는 아래에서 자세하게 설명하겠습니다. 

 

 

MainAxisAlignment와 CrossAxisAlignment의 차이

 

MainAxisAlignment와 CrossAxisAlignment는 Row와 Column에서 서로 반대로 쓰입니다.

 

아래의 Table이 있다고 가정했을 때 Row에서 Main Axis는 가로 행이 되고 Cross Axis는 세로 열이 됩니다.

Row Widget	MainAxisAlignment
CrossAxisAlign	1	2
	3	4

 

Column에서는 반대입니다. Cross Axis가 가로 행이 되며, Main Axis는 세로 열이 됩니다.

Column Widget	CrossAxisAlignment
MainAxisAlign	1	2
	3	4

 

Row와 Column에서 Main Axis와 Cross Axis의 차이를 정확하게 아셔야 올바르게 적용할 수 있습니다.

 

 

Row와 Column를 조합한 모습이다. MediaQuery.of(context).size를 활용하면 현재 디바이스의 사이즈를 구할 수 있다.

 

[전체 소스 코드]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/Q9GA9DUgPEQ

 

마치며...

 

Container, Row, Column은 UI를 구성할 때 필수적인 요소로 기본적인 원리와 방식을 이해하는 것이 중요하고, 이 부분만 잘 이해해도 전반적인 grid 방식이나 배치 등 다방면으로 응용할 수 있다고 생각합니다. 다음 시간에는 Stack widget에 대하여 알아보도록 하겠습니다. 감사합니다!