[Flutter] Row Column Axis & Alignment

Flutter를 통해 UI작업을 할때 많이 사용하는 Row, Column에 대해 간단히 정리해 보겠습니다.

단어의 의미 그대로 Row는 가로행으로 여러 위젯을 배치할 때 사용됩니다.

반대로 Column은 세로열로 여러 위젯을 배치할때 사용을 합니다.

 

여기서 가장 헷갈리는 부분이 Axis 즉, 축의 의미일 것 같습니다.

Flutter 에서는 mainAxis와 crossAxis라는 용어로 사용을 하고 있습니다.

그런데 mainAxis와 crossAxis는 단순히 가로, 세로의 의미가 아닙니다.

주축과 종축으로 구분하여 생각하시면 이해가 쉬울 것 같습니다.

Row의 경우에는 가로행이므로 가로방향이 주축, 즉 mainAxis가 됩니다.

반대로 세로는 종축, 즉 crossAxis가 되겠죠.

여기까지는 이해가 어렵지 않을 것 같습니다.

 

Row의 mainAxis & crossAxis

 

보통 헷갈리는 경우는 Column이 될텐데, Column은 세로열이 주축, 즉 mainAxis가 됩니다.

반대로 가로 방향이 종축, 즉 crossAxis가 됩니다.

아래 그림으로 이해하시는게 빠를것 같네요.

 

Column의 mainAxis & crossAxis

 

간단한 소스코드로 예를 들어 보겠습니다.

 

 

세개의 위젯을 정렬하지 않고 배치해 보았습니다.

이제 Column을  주축인 세로방향으로 화면의 중간에 위치해보겠습니다.

 

Column(
  mainAxisAlignment: MainAxisAlignment.center,

 

 

이제 Column의 주축에 대해 이해가 됐으리라 생각됩니다.

이제 mainAxisAlignment의 몇가지 속성을 확인해 보겠습니다.

 

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,

 

Column내부에 배치된 위젯들을 같은 간격을 두고 배치합니다.

파워포인트에서 정렬 기능을 생각하시면 이해가 쉬울 것 같습니다.

 

 

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,

 

spaceBetween은 첫번째 위젯과 마지막 위젯의 위치가 화면의 가장 끝쪽이지만 spaceEvenly는 화면의 양쪽 끝 공백 공간도 동일하게 배분을 해줍니다.

아래 화면을 보시면 쉽게 이해할 수 있을 것 같습니다.

 

 

그외 start, end등 몇가지 정렬 옵션이 있지만 쉽게 유추할 수 있는 옵션입니다.

UI 디자인에 너무나도 빈번하게 사용되는 위젯인만큼 확실하게 이해하고 넘어가는 것도 좋을 것 같아 정리해 보았습니다 ^^