[Flutter] Widget정리 #2 배치관련 위젯
반응형
배치관련 위젯
하위 위젯을 가로 또는 세로로 배치하거나 위젯 위에 위젯을 겹칠때 사용
Row | 위젯을 가로,세로로 배치하는데 사용한다. 주축(Main Axis) 와 반대축(Cross Axis)개념이 존재하는데 Row는 가로가 주축, 세로가 반대축 Column은 가로가 반대축, 세로가 주축. *정렬 MainAxisAlignment MainAxisAlignment.start - 시작에 정렬 MainAxisAlignment.center - 중앙에 정렬 MainAxisAlignment.end - 끝에 정렬 MainAxisAlignment.spaceBetween - 자식 위젯의 간격을 균등하게 정렬 MainAxisAlignment.spaceAround - 자식 위젯의 간격을 균등하게 배정하고 왼쪽 끝과 오른쪽 끝을 위젯사이 거리의 반만큼 배정해 정렬 MainAxisAlignment.spaceEvenly - 자식 위젯의 간격을 균등하게 배치하고 왼쪽 끝과 오른쪽 끝도 균등하게 배 CrossAxisAlignment CrossAxisAlignment.start - 시작에 정렬 CrossAxisAlignment.center - 중앙에 정렬 CrossAxisAlignment.end - 끝에 정렬 CrossAxisAlignment.stretch - 반대축 최대한 늘려서 정렬 |
Column | |
Flexible | Row나 Column에서 사용하는 위젯, flex 매개변수를 이용해 각 Flexible 위젯의 비율을 설정할 수 있음. fit 매개변수를 이용하여 FlexFit.tight , FlexFit.loose 를 사용하여 남은 공간을 최소한으로, 혹은 최대한으로 차지할지 설정 가능 |
Expanded | Flexible 위젯에서 FlexFit.tight를 기본으로 제공해준 위젯 |
Stack | 위젯을 겹치는 기능 제공, children에 위치한 순서대로 위젯을 겹쳐 쌓음. |
반응형
'Study > Flutter' 카테고리의 다른 글
[Flutter] Widget정리 #2 WebView, flutter 권한 (0) | 2023.01.18 |
---|---|
[Flutter] StatefulWidget vs StatelessWidget (0) | 2023.01.17 |
[Flutter] Widget정리 #1 Text, 제스처, 디자인 (0) | 2023.01.13 |
[Flutter] 앱 개발 로드맵 (0) | 2023.01.12 |
[Flutter] 문법정리#3 클래스 (0) | 2023.01.12 |
댓글