위젯
플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있다. 플러터 프레임워크는 수십가지 기본 위젯을 제공하며 앱 개발자가 직접 위젯을 만들 수도 있다.
자주 사용하는 위젯
Text 위젯
- 글자를 화면에 그릴 때 사용
제스처 관련 위젯
Button 위젯
| TextButton | OutlinedButton | ElevatedButton |
|---|---|---|
| 텍스트만 있는 버튼 | 테두리가 있는 버튼 | 입체적으로 튀어나온 느낌의 배경이 들어간 버튼 |
IconButton 위젯
- 아이콘을 버튼으로 만듦
GestureDetector 위젯
- 하위 위젯이 제스처에 반응하도록 해줌
FloatingActionButton
- 화면의 오른쪽 아래, 사용자가 가장 많이 사용하는 위치에 버튼을 띄우는 데 사용
디자인 관련 위젯
Container 위젯
- 위젯에 배경, 패딩, 테두리 등 디자인 요소를 추가하는 데 사용
SizedBox 위젯
- 너비와 높이를 지정할 수 있는 위젯
- 흔히 위젯 사이의 간격을 구현할 때 많이 사용
Padding 위젯
- 하위 위젯에 패딩을 적용할 때 사용
SafeArea 위젯
- 시스템 UI에 가려지지 않게 위젯을 화면에 그릴 때 사용
배치 관련 위젯
Row 위젯
- 가로로 위젯을 배치할 때 사용
Column 위젯
- 세로로 위젯을 배치할 때 사용
Flexible 위젯
- Row나 Column에서 하위 위젯이 비율만큼 공간을 차지할 수 있게 해줌
Expanded 위젯
- Row나 Column에서 하위 위젯이 최대한의 공간을 차지할 수 있게 해줌
Stack 위젯
- 하위 위젯들을 순서대로 겹쳐줌
참고
이 글은 골든래빗 《코드팩토리의 플러터 프로그래밍》의 스터디 내용 입니다.
Front-End Developer