📌 Container()
오늘은 Container부터 Container를 사용하여 Column과 Row 부분 구현할때 사용할 수 있는 속성들을 정리하여 본다.
이 부분은 코드 예제는 따로 안해봤고, 특징이나 속성 위주로만 정리하며 강의를 들었다.
일단, Container의 특징이다.
Container는 기본적으로 Layout widget 내에서 single child를 가지는 위젯으로 분류되어 있다.
그래서 Container는 child를 하나만 가진다는 특징이 있다.
Flutter에서는 child를 하나만 가질 수 있는 위젯과 여러 개 가질 수 있는 위젯이 있어서 잘 알아두어야 한다.
Container의 가장 큰 두가지 특징은 아래와 같다.
- child가 없는 경우, 항상 최대 크기를 차지한다.
- child가 있는 경우, child의 크기만큼만 차지한다.
✅ SafeArea()
Container에 child 값을 주어서 child 부분만 영역을 차지하게 구현해보면,
화면의 구석탱이에 Container가 생겨서 화면을 이탈하는 경우가 생긴다.
따라서 화면을 이탈하지 않도록 하기 위해 Safe Area 위젯을 사용한다.
사용법은 그냥 SafeArea(Container()), 이렇게 Safe Area 위젯 안에 Container 위젯을 넣어주면 끝이다.
✅ width, height
Container에서 넓이와 높이를 조절하는 방법은 width랑 height 값을 주는 것이다.
Container(
width : 100,
height : 200
),이런식으로 간단하게 해주면 된다.
✅ margin, padding
margin과 padding은 EdgeInsets 속성을 사용해서 하면 된다.
margin과 padding의 개념은 css랑 동일하다.
margin : EdgeInsets.symmetric(
vertical : 80 // 세로 축
horizontal : 20 // 가로 축
),
padding : EdgeInsets.all(20),📌 Column() & Row()
Row도 Column이랑 같은 개념인데 Row는 가로로 한 줄로 배치된다는 차이만 있다.
따라서 Column의 속성만 정리하도록 하겠다.
일단 아래와 같이 Column 위젯 안에 Container 위젯이 3개 있다고 가정하자.
✅ main/crossAxisAlignment
-
MainAxisAlignment.center
Column위젯을 Center 위젯 안에 넣는 경우 좌우에 대해서만 조절한다.
그래서 Column 위젯을 위 아래에 대해서도 가운데로 오게 하려면,
mainAxisAlignment : MainAxisAlignment.center를 써줘야 한다.
근데 이렇게 해도 Column 위젯이 세로축을 모두 차지하고 있다.
이를 실제 사용하는 부분만 차지하게 하려면 아래 mainAxisSize 써서 하는 것을 보면 된다. -
MainAxisAlignment.spaceEvenly
같은 간격 두고 세로 정렬 하고 싶을 경우에는 spaceEvenly를 쓰면 된다.
Column 안에mainAxisAlignment : MainAxisAlignment.spaceEvenly -
CrossAxisAlignment.end
Column 안에서 가로축 정렬 하는 경우에는crossAxisAlignment : CrossAxisAlignment.end를 쓰면 된다.
만약에 화면의 끝으로 가로축 정렬 하고 싶으면 Column안에 Container 하나 더 만들어서 (invisible container를 만들어 줌)속성을width : double.infinity로 주면 된다.
그리고 Column 안에서 가로축 꽉 채우게 하는 경우에는
crossAxisAlignment : CrossAxisAlignment.stretch이렇게 하면,
자식인 컨테이너들 한테는 width를 안줘도 가로로 꽉 채워서 자식 컨테이너들도 채워진다.
✅ mainAxisSize
Column 위젯이 실제 사용하는 부분만 차지하도록 하려면,
mainAxisAlignment : MainAxisAlignment.center 대신
mainAxisSize : MainAxisSize.min 을 써주면 된다.
이렇게 하면 상하 통제권도 확도 되어서 Center 안에만 넣어주면 정가운데에 배치 가능하다.
✅ verticalDirection
Column 방향을 아래부터 1,2,3 순서로 배치하는 경우,
Coulmn 안에 속성에 verticalDirection : VerticalDirection.down 를 넣어주면 된다.
Coulmn(
verticalDirection : VerticalDirection.down,
)✅ SizedBox
자식 Container들 사이에 간격을 만드는 경우에는 SizedBox를 넣어 사이를 띄워준다.
투명한 상자를 Container들 사이에 넣어주는 느낌이라고 생각하면 된다.
SizedBox(height:10) 이런 식으로 해주면 된다.
🔗 레이아웃 학습 사이트 링크
그 밖에 다양한 레이아웃 관련 자료는 Flutter Layout Cheat Sheet를 참고하자.
📌 마무리
오늘 포스팅은 이렇게 좀 간단하게 해봤다.
오늘 진짜 바빴다..
근데 뭐 딱히 평소보다 한건 없는데 아마 강사 일이 좀 늦게 끝나서 같다.
Navigator 강의도 하나 들었는데, 이거는 pushNamed method 강의까지 듣고 정리할거다.
암튼 오늘도 나름 알찬 하루였다.
내일은 더욱 알차게 보내자 🐱💡
참고
- Flutter
- Dart packages
- 코딩셰프 Flutter 담백한 맛
- 코딩셰프 Flutter 순한맛 시즌1
