레이아웃 위젯
Container
- 가장 일반적으로 많이 사용되는 위젯
- html의
<div>같은 느낌
SizedBox
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에서 주로 사용
Stack & Positioned
Stack
- 이런 프로필 사진에서 겹치는 경우 사용
- Stack의 children의 순서대로 밑에서부터 위로 층층히 쌓아서 표현
- fit option : expand(부모의 사이즈만큼 확장해서 사용, loose(기본 옵션)
Position
- 특정 위치를 커스텀해서 사용할때 사용
- left, top 등으로 사용
기능성 위젯
Text
- 글자를 사용할때 사용
- style : TextStyle()객체 안에 옵션을 넣어서 사용
- fontSize, fontWeight, color, fontStyle, letterSpacing
TextField
- Input창
- InputDecoration()을 통해 수정 가능
Switch
- 토글 버튼
- onChanged : (bool newValue) { } 를 통해 토글 이벤트를 처리
Slider
- progressBar
- value, min, max 등으로 범위를 지정
- onChanged : (double newValue) { } 를 통해 이동 가능
GestureDetector
- onDoubleTap, onTap 등의 이벤트를 감지
- 그 이벤트를 통해 처리할수 있다.
Image
- Image.network(url)을 통해 네트워크를 불러올 수 있다
- Image.asset() 가지고 있는 이미지를 사용할 수 있다.
