[플러터 2] UI 구조 1

UI 구조

휴대폰 > Material App > Scaffold

---

Spacer 위젯

Row 또는 Column 과 같은 Flex 공간에서 위젯과 위젯 사이의 간격을 조정하는데 사용한다.

 

Padding 위젯

위젯의 여백을 주기위해 사용한다.

- EdgeInsets.symmectric : 수직이나 수평 중 선택해서 여백을 줄 때 사용.

 

Image 위젯

이미지 배치

- 이미지 위젯 사용 시 fit 속성으로 이용

- BoxFit.contain : 원본사진의 가로 세로 비율 변화없음

- BoxFit.fill : 원본사진의 비율을 무시하고 지정한 영역에 사진을 맞춤

- BoxFit.cover : 원본사진의 가로 세로 비율을 유지한 채 지정한 영역에 사진을 맞춤

                    장점 : 사진비율을 유지

                    단점 : 사진이 지정한 크기를 벗어나면 잘릴 수 있음

 

 

Expanded 위젯

남은 위젯을 공간을 확장하여 공간을 채울 수 있도록 하는 위젯이다.

컬럼 위젯은 수직으로 배치가되기때문에 남은 공간은 높이이다.

속성으로는 flex 가 있으며, 2 이면, 50%, 3 이면 33.33 % 등으로 등분으로 계산되어 표시된다.

기본 값은 flex : 1 로 100% 표시된다.

(*) 하얀색 영역이 남을 때 이 위젯을 사용하면, 비어있어보이는 영역이 사라진다.