만들어본 UI
위젯
두개의 앱을 그리면서 자주 쓸거 같은 위젯을 정리해봤다.
Container
- 가장 일반적으로 많이 사용되는 위젯
- html의
<div>같은 느낌
SizedBox
- 위젯과 위젯 사이에 간격을 주고 싶을때 사용
Padding
EdgeInsets를 이용하여 값을 설정한다.
Row & Column
Row
- 가로로 자동 정렬
- MainAxisAlignment -> start, end, spaceBetween 등의 옵션으로 조절 가능
children : List.generate(n, () => Container())
이런식으로 javascript의 map처럼 활용Column
- 세로로 자동 정렬
- MainAxisAlignment(세로 기준) -> start, end, spaceBetween 등의 옵션으로 조절 가능
Expanded
- 공간을 확장시킬때 사용
- 나머지 영역을 다 확장할때 사용
- flex 사용 가능
- flex 1(1/6), flex 3(3/6), flex 2(2/6)
- column과 row의 children에서 주로 사용
SafeArea
- 상단 배터리와 시간 등의 영역을 침범하지 않도록 해준다.
- Scaffold의 Appbar를 사용하면 자동 적용
AspectRatio
- 이미지의 비율을 설정할때 사용
- 1 / 2 라면 세로 1 가로 2라는 의미
ClipRRect
- Clip : 자르다. R : 둥그런 Rect : 직사각형으로
- 이미지를 라운드진 직사각형으로 마스크 할때 사용
