오공완(with 코드팩토리의 플러터 프로그래밍) #5-3 (배치 위젯, Row, Column, Flexible, Expanded, Stack)

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

배치에서 주축(main axis)과 반대축(cross axis)  개념이 있다고.. 가로에서는 가로가, 세로에서는 세로가 주축이 됨.

 

  Row, Column 위젯

 

Row는 가로배치, Column은 세로 배치, 실습은 Row만 해 봤다. Column도 같은 개념. 다만, 주축과 반대축을 반대로 생각하면 되는 걸로..

double.infinity는 가득 채운다는 의미라고..

start: 시작 정렬, 오른쪽 정렬

center: 가운데 정렬

 

end: 끝 정렬, 왼쪽 정렬

spaceBetween: 자식 위젯 균등정렬

spaceEvenly: 좌우 공백까지도 같은 공간으로 배분인데.. 이상하다.

spaceEvenly: 좌우 공백까지도 같은 공간으로 배분. 중간에 있었던 SizedBox를 없애니 이제야 제대로..

spaceAround: 좌우 공백은 자식 공백의 반

 

crossAxisAlignment: 시작 정렬, center: 가운데, end: 끝 정렬

 

spaceEvenly: 좌우 공백까지도 같은 공간으로 배분인데.. 이상하다.

 

stretch는 늘려서 정렬

 

  Flexible 위젯

 

Flexible에 제공된 child가 크기를 최소한으로 차지하게 할 수 있단다. flex 매개변수를 이용해 공간 비율 지정 가능.

파랑 flex: 1, 빨강 flex 1

 

파랑 flex 1, 빨강 flex 3

나도 flex 하고 싶다..

 

  Expanded 위젯

 

Flexible 위젯을 상속한단다? FlexFit.tight는 자식 위젯이 차지하는 공간과 관계없이 남은 공간을 모두 차지, FlexFit.loose는 자식 위젯이 필요한 만큼의 공간만 차지. 아마도 이건 공간을 배치하고 남은 영역을 어떻게 차지하게 할 것인지를 결정하는 위젯인 거 같다. Expanded 위젯은 FlexFit.tight를 기본으로 제공해 준 위젯이란다. 남는 공간을 최대한 차지하게 된다고.. 이건 아마도 해 봐야 할 것 같다.

 

  Stack 위젯

 

겹치는 위젯, 쌓아올리는 위젯?

이걸 오른쪽 정렬을 하게 하려면 어떻게 하지?

암튼, 오늘은 여기까지..

flutter를 이용하면 뭔가 결괏값이 화면에 보이니깐 뭔가 해낸 기분이다.

주말에도 놀면서 사부작사부작 공부해야지.