Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.
https://www.youtube.com/@codingchef
1. Container
크기
Container는 child를 따로 지정하지 않으면 가능한 많은 크기를 차지하려고 한다. 아래의 우측 그림 상에서 상태 표시줄 부분에까지 Colors.white가 적용된 것을 볼 수 있다.
child
Container는 children이 아닌 child 속성을 갖는다. 즉 1개의 자식만 갖는다. 각 위젯들이 child를 갖는지, children을 갖는지 알아보면 위젯 트리를 머릿 속으로 떠올릴 때 도움이 된다.
SafeArea
Container를 SafeArea로 둘러싸면 상태표시줄 부분에는 영향이 안가도록 할 수 있다. Container에 커서를 올린 뒤(Alt + Enter | Option + Enter)를 입력하여 wrap with Widget을 선택하고 SafeArea로 바꿔주면 상태표시줄 부분은 영향이 안가는 것을 볼 수 있다.
반대로 둘러싼 위젯을 제거하고 싶을 때는 Remove this widget을 선택해주면 괄호 등을 신경쓸 필요없이 알아서 해당 위젯을 잘 지워준다!!
Flutter Inspector
Android Studio의 우측 화면 끝에 Flutter Inspector를 눌러 각 위젯들의 가상 크기에 대한 guideline을 그래픽으로 확인할 수 있다. guideline 옵션을 켜고나면 flutter inspector 탭을 한 번 더 눌러서 inspector 창을 꺼도, emulator상에 guideline은 계속 표시된다.
margin, padding
margin, padding 속성을 EdgeInsets를 통해 지정해줄 수 있다. 그럼 guideline들이 변화하는 것을 볼 수 있다.
2. Column
크기, children
Column은 children을 갖고 세로로 가능한 많은 공간을 차지한다. 가로 폭은 자식 위젯의 최대 폭까지만 맞춘다.
mainAxisAlignment, mainAxisSize
세로축을 기준으로 하므로, mainAxis는 세로축이 된다. 그리고 이 속성 값을 설정하여 내부 children들의 간격, 크기를 조절할 수 있다.
verticalDirection, crossAxisAlignment
추가로 verticalDirection 속성을 주면 children들의 배치 순서를 바꿀 수 있다. 그리고 crossAxisAlignment는 Column에 cross 방향, 즉 가로 방향으로 children들의 alignment를 설정할 수 있다. 특히 CrossAxisAlignment.stretch 값을 주면 cross axis 방향으로 container를 최대로 늘릴 수도 있다.
3. Row
Column과 축 방향만 다를뿐 대부분의 속성을 갖게 적용할 수 있다. 아래 그림에서는 두번째 파란 container가 화면을 넘어가서 남은 부분은 표시할 수 없어 노란 빗금 container로 표시되었다.
flutter layout cheetsheet
마지막으로 layout이 헷갈릴땐 아래 링크로 가서 그림과 코드로 쉽게 다시 복습할 수 있다.
https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
'Programming-[CrossPlatform] > Flutter' 카테고리의 다른 글
Flutter 기본-6. Collection, Generic. 아주 살짝만.. (0) | 2023.01.15 |
---|---|
Flutter 기본-5. Navigator, pushNamed method (0) | 2023.01.15 |
Flutter 기본-3. SnackBar, BuildContext, Toast (0) | 2023.01.15 |
Flutter 기본-2. Button, Drawer (0) | 2023.01.14 |
Flutter 기본-1. flutter 프로젝트, main.dart의 기본구조와 간단한 속성들 (0) | 2023.01.14 |