Flutter UI 구성 - Scaffold, AppBar, Drawer, Body, floatingActionButton
Scaffold
Flutter에서 기본적인 시각적 레이아웃 구조를 제공하는 위젯으로, Material Design의 기본 레이아웃 구조를 구현할 때 주로 사용된다. Scaffold는 앱의 전반적인 시각적 요소와 상호작용을 관리하는 역할을 한다.
Scaffold 속성
- appBar: 화면 상단 AppBar 위젯
- body: 앱의 주요 내용을 담고 있는 공간
- drawer: 좌측에서 슬라이드하여 열리는 내비게이션 메뉴
- floatingActionButton: 화면에 떠 있는 행동 버튼
AppBar
Scaffold의 상단에 배치되는 애플리케이션의 제목 표시줄로, 주로 앱의 제목, 탐색 버튼, 작업 버튼을 포함한다.
AppBar 속성
- title: AppBar의 제목
- actions: AppBar의 오른쪽에 배치할 아이콘 버튼 목록
- leading: AppBar의 왼쪽에 배치할 위젯 ex) 메뉴 아이콘)
- backgroundColor: AppBar의 배경 색상
Drawer
사용자가 스와이프하거나 메뉴 버튼을 클릭하여 열 수 있는 슬라이드 메뉴로, 주로 내비게이션 링크나 사용자 프로필 정보 등을 포함한다.
Drawer 속성
- child: Drawer 내부에 포함할 위젯(예: ListView)을 설정합니다. 일반적으로 ListTile을 사용하여 여러 항목을 추가합니다.
- elevation: Drawer의 그림자 깊이를 설정합니다.
Body
Scaffold 내에서 앱의 주요 콘텐츠를 표시하는 영역으로, 여기에는 텍스트, 이미지, 버튼, 리스트 등 모든 유형의 위젯을 포함할 수 있다.
Body 속성
- child: Body에 표시할 위젯을 설정한다. ex) Container, Column, Row 등 다양한 위젯을 사용할 수 있다.
floatingActionButton
Flutter에서 주로 사용되는 UI 요소로, 화면의 특정 위치에 떠 있는 동작 버튼을 제공한다. 이 버튼은 일반적으로 중요한 동작을 수행하는 데 사용되며, 사용자가 쉽게 접근할 수 있도록 설계되어 있다.
floatingActionButton 속성
- onPressed: 사용자가 버튼을 눌렀을 때 실행할 함수를 정의한다. 이 속성을 필수로 설정해야 한다.
- child: 버튼 내부에 표시할 위젯을 설정한다. ex) 아이콘, 텍스트
- backgroundColor: 버튼의 배경 색상
- tooltip: 버튼에 마우스를 올리거나 길게 누르면 나타나는 도움말 텍스트, 사용자가 버튼의 기능을 이해하는 데 도움을 준다.
- shape: 버튼의 모양을 정의할 수 있다. 기본적으로 둥근 버튼이지만, 커스터마이징이 가능하다.
