[Flutter] 8. 프로필 앱 만들기

김주희

Jun 08, 2025

Contents

화면 구조 초기 세팅 AppBar Body

화면 구조

초기 세팅

프로젝트 main 세팅

fst 자동완성

TabBar 샘플링 가져오기

TabBar 위젯을 처음 보고 샘플링하여 TabBar를 AppBar 자리가 아닌 Body 쪽으로 위치를 내리는 연습하였다. TabBar를 샘플링하여 연습한 결과물과 지금 만들고자 하는 프로필 앱의 구조와 유사하므로 샘플링 코드의 Expanded 이하를 가져와서 Scaffold의 body를 차지하던 Placeholder()를 지우고 Column으로 바꾼 뒤 Column의 자식으로 Expanded 이하의 코드를 붙여넣는다.

TabBar 샘플링 결과물

만들고자 하는 프로필 앱

DefaultTabController 위젯으로 추출하기

AppBar

AppBar - leading

아이콘 형태의 버튼을 만들기 위해서 IconButton 위젯을 사용한다. IconButton은 onPressed와 icon을 필수 매개변수로 받는다. onPressed는 return이 없는 lambda expression로 버튼 클릭하면 무엇을 하고 싶은지에 대한 행위이고 icon은 버튼의 아이콘을 지정하는 매개변수이다.

AppBar - title

iOS에서는 title이 가운데, 안드로이드에서는 왼쪽 자동 정렬된다. 안드로이드에서도 title을 가운데 정렬하고 싶다면 centerTitle 속성을 통해 직접 가운데 정렬 설정 가능하다.

AppBar - actions → Drawer

오른쪽의 햄버거 버튼의 경우 AppBar 뿐만 아니라 Scaffold가 제어해서 전역적으로 써야하므로 AppBar에서 actions로 관리하지 않고 Scaffold의 endDrawer 속성을 사용한다. Drawer는 화면의 왼쪽 끝에서 슬라이드 되어 나타나는 사이드 메뉴를 설정하는 속성으로 endDrawer는 화면의 오른쪽 끝, Drawer는 화면의 왼쪽 끝 지점에서 슬라이드 되어 나타난다. Container 위젯을 통해 폭과 색상을 지정하지 않을 경우 transparent 상태로 배경색은 아예 없고, 폭은 Drawer의 폭과 일치한다.

색상, 폭 설정 전