Flutter 기본-4. Container, Column, Row 복습

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

Flutter Layout Cheat Sheet