Body - layout

column과 row에 대해서 알아보자

• column은 열을 의미하고 row는 행을 의미한다.
• 여러 위젯을 가로, 세로로 배치할 수 있도록 묶어주는 위젯이다.

먼저 layout을 잡을때 섹션을 나누고 큰 틀부터 작업을 한다.

1. 먼저 row를 이용해 2구역으로 나누어 준다
2. 노란색 영역에 데이터를 채워넣은 후 column 위젯을 사용해 오른쪽 구역을 나누어 준다.
3. 만약 오른쪽 하단과 같이 1개의 행에 2개의 열이 들어가게 된다면 파란색 구역 작업 후
4. row 위젯을 사용해 핑크와 하늘색 구역을 나누어 준다.

섹션을 나눠주어 작업을 하게 되면 overflow가 생길 수도 있다.

-> column 위젯의 폭을 지정하지 않게 되면 위젯이 구역을 넘어갈 수 있기 때문에 생기는 오류이다.

-> Expanded 위젯을 사용하면 위의 오류를 해결할 수 있다.

-> Expanded 위젯은 child 위젯이 차지할 수 있는 공간을 최대한 차지하도록 크기를 지정해 주는 위젯이다.

 

요소 정리하기!

• crossAxisAlignment
  • row와 column은 주축과 부축으로 기준을 정렬할 수 있다.
  • 주축을 main axis, 부축은 cross axis라고 한다.

row의 정렬기준

 

row는 행이기 때문에

main Axis 가 가로가 되고,

cross Axis는 세로가 된다.

 

 

 

 

 

 

 

 

 

반대로 column은 열이기 때문에

main Axis는 세로가 되고,

cross Axis는 가로가 된다.

 

 

 

 

 

 

 

row의 세부 정렬

 

column의 세부 정렬

 

★ 화면에서 십자가를 그린후 row나 column을 어떻게 정렬해야하는지 생각하면 더 쉽다!