플러터 2장 UI에 사용되는 위젯 제대로 파악하기!

오늘은 플러터 개발에서  UI에 사용하는 위젯의 의미를 제대로 파악해보기로 했다. 퍼블리싱에서 가장 중요한 칸 나누기 즉 레이어 에 맞게 네모 박스를 정렬하고 맞추는 부분이 가장 중요하다고 할 수 있다. 

 

Container()

Container() widget은 box의 높낮이를 설정하고 배경색을 지정할 수도 있으며 UI를 그리기 쉽다.

 

Container 위젯의 argument에서 가장 기본적인 width와 height은 너비와 높이를 지정할 수 있다.

Container() 위젯의 디자인을 커스텀 하는 속성 값에는 decoration을 사용하면 된다. decoration을 사용하면 Container()의 속성인 color은 지정하는 것이 아닌 BoxDecoration() 위젯에서 color 값을 지정해야한다. 또한 borderRadius는 모서리 부분을 변경하고 BorderRadius.circulr(int)는 모든 테두리 부분을 라운드 처리하는 것이다. border은 테두리의 두께와 색상을 설정할 수 있고 BorderRadius, border는 전체 뿐만 아니라 각 모서리 마다 원하는 스타일로 커스텀이 가능하다.

 

SizedBox()

SizedBox는 widget의 크기를 다루는 위젯이다.

 

기본 속성으로는 width과 height가 있고 SizedBox.expand(), SizedBox.shrink(), SizedBox.formSize()도 사용해 UI를 그릴 수 있다. padding을 이용해 간격을 조절하지만 미세하게 높낮이를 조정할 때는 SizedBox()를 사용하기도 한다. 그리고 SizedBox()를 사용할 떄 앞에 const를 붙여주는 것이 성능에 유리하다.

 

속성

• mainAxisSize
  
  • mainAxisSize.min : 크기만큼 차지
  • mainAxisSize.max : 남은 영역 모두 사용
• mainAxisAlignment
  • mainAxisAlignment.start : 왼쪽(위) 정렬
  • mainAxisAlignment.end:오른쪽(아래) 정렬
  • mainAxisAlignment.center: 가운데 정렬
  • mainAxisAlignment.spaceEvenly: 영역을 고르게 정렬
  • mainAxisAlignment.spaceBetween: start,end 사이에 고르게 배치
  • mainAxisAlignment.spaceAround: 앞/뒤 영역을 두고 사이에 배치

Column 과 Row

기본적인 레이아웃 구성에 Column과 Row가 있다.

Colum은 세로 즉 아래 방향으로 나열한다. 그리고 childern을 가져 아래로 정렬한다.

 

Row는 그 반대로 가로로 나열한다. childern을 가로로 나열한다.

 

 

아래에 코드 사진은 퍼블리싱을 진행하며 위젯을 사용한 코드이다.