Flutter Column과 Row

제가 아직 flutter로 개발을 엄청 많이 했다고 볼 수는 없지만 Column위젯과 Row위젯은 안 쓸수도 무시할 수도 없는 위젯인 것 같습니다.

그래서 이번엔 Column과 Row위젯을 알아보겠습니다.

 

Column위젯과 Row위젯은 자식 위젯들을 세로, 가로로 정렬해주는 위젯입니다.

 

Column위젯을 사용해 자식 위젯들을 세로로 정렬할 수 있습니다.

Column위젯을 사용해 Container들을 세로 정렬

 

 

Row위젯을 이용해 자식 위젯들을 가로로 정렬할 수 있습니다.

Row위젯을 사용해 Container들을 가로 정렬

 

그 후 MainAxisAlignment와 CrossAxisAlignment로 가운데 정렬 혹은 자식 위젯들에게 일정한 간격을 주는 등의 좀 더 세밀한 정렬을 할 수 있습니다.

위에 그림처럼 MainAxisAlignment는 원래 정렬 해주는 방향(Row위젯일 때는 가로, Column위젯일 때는 세로)을 말하고

CrossAxisAlignment는 MainAxisAlignment에 반대 방향(Row위젯일 때는 세로, Column위젯일 때는 가로)을 말한다.

 

MainAxisAlignment로 다음과 같은 정렬 방식이 있다.

• start : Row일 때는 왼쪽, Column일 때는 위쪽으로 정렬
• end : Row일 때는 오른쪽, Column일 때는 아래쪽으로 정렬
• center : Row와 Column 둘 다 가운데로 정렬
• spaceAround : Row와 Column 둘 다 각자 여유 공간을 주되 처음 자식과 마지막 자식에게는 주변 공간을 나머지 자식들과 여유 공간에 절반 씩만 준다.
• spaceBetween : Row와 Column 둘 다 처음 자식과 마지막 자식을 양 끝에 붙이고 나머지 자식들에게 균등하게 여유 공간을 준다.
• spaceEvenly : Row와 Column 둘 다 자식들에게 균등하게 여유 공간을 준다.

MainAxisAlignment

CrossAxisAlignmet도 다음과 같은 정렬 방식이 있다.

• start : Row일 때는 왼쪽, Column일 때는 위쪽으로 정렬
• end : Row일 때는 오른쪽, Column일 때는 아래쪽으로 정렬
• center : Row와 Column 둘 다 가운데로 정렬
• streach : Row와 Column 둘 다 자식들을 빈 공간없이 늘림
• baseline : Row와 Column 둘 다 라인에 자식들을 맞춤

여기까지 Column과 Row위젯에 대해 알아봤습니다.