다재다능 개발자 성장기 🚀
Flutter의 레이아웃 위젯 본문
Scaffold
플러터 앱에서 가장 기본적인 뼈대를 담당하는 위젯이다.
appBar, body, floatingActionButton 등을 포함해 다양한 UI 요소들을 한 곳에서 관리할 수 있다.
body
플러터에서 Scaffold 위젯의 중요한 부분으로, 화면의 주 콘텐츠를 정의하는 데 사용된다.
앱 화면의 중앙 영역을 차지하며, 사용자가 볼 주요 UI 요소들을 배치하는 공간이다.
Column
위젯들을 세로로 배치하는 위젯이다.
children 속성에 사용할 위젯들을 리스트로 선언해 사용한다.
Row
위젯들을 가로로 배치하는 위젯이다.
children 속성에 사용할 위젯들을 리스트로 선언해 사용한다.
Text
문자열을 화면에 표시하기 위한 위젯이다.
AppBar
앱 화면의 헤더 역할을 하는 위젯이다.
- title: 앱바의 중앙에 표시되는 텍스트나 위젯이다. 보통 앱의 제목이 들어간다.
- leading: 앱바의 왼쪽에 표시되는 위젯으로, 일반적으로 드로어 아이콘이나 뒤로 가지 버튼을 배치하는 데 사용된다.
- action: 앱바의 오른쪽에 배치되는 위젯으로, 일반적으로 아이콘 버튼이나 추가적인 액션을 배치할 때 사용된다.
- centerTitle: 앱바의 제목을 중앙에 배치할지 여부를 설정하는 속성이다. 기본값은 true이다.
Spacer
Row나 Column에서 위젯 사이의 간격을 조정하는 데 사용된다.
기본 flex는 1 이다.
Padding
자식 위젯 주변에 여백을 주는 위젯이다.
- EdgeInsets.all(1.0) : 상화좌우 모두
- EdgeInsets.symmetric(vertical:1.0) : 상하(세로)
- EdgeInsets.symmetric(horizontal:1.0) : 좌우(가로)
- EdgeInsets.only(left:10.0) : 왼쪽 만
- EdgeInsets.only(right:10.0) : 오른쪽 만
Expanded
Row, Column 내에서 남은 공간을 확장하여 공간을 채울 수 있도록 하는 위젯이다.
기본 flex는 1 이다.
SizeBox
width 및 height 크기를 가지는 빈 상자이다.
상자 내에 위젯을 배치할 수도 있며 빈 상자로도 사용할 수 있다.
'Flutter' 카테고리의 다른 글
Flutter 아이콘 한 눈에 찾기 쉬운 사이트 (0) | 2024.11.19 |
---|---|
ListView (0) | 2024.11.14 |
Flutter 프로젝트의 기본적인 구성요소들 알아보기 (0) | 2024.11.12 |
break 와 return 의 차이 (0) | 2024.11.11 |
Dart로 전투 RPG 게임 만들기 회고 (1) | 2024.11.07 |