![[Flutter] 8. 프로필 앱 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-10T00%3A40%3A12.525Z-24d9fe31-ae20-4d2c-a7de-33228b2f9631&w=3840&q=75)
화면 구조
초기 세팅
프로젝트 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의 폭과 일치한다.
색상, 폭 설정 전
색상, 폭 설정 후
Container 위젯으로 추출하기 + component로 분리하기
AppBar 메서드로 추출하기
AppBar는 앱마다 다 다를수 밖에 없어서 위젯이 아닌 메서드로 추출한다.
메서드 추출 단축키 Ctrl + Alt + M
Body
프로필 이미지 + 이름 + 소개 → Row
Row 안에 프로필 이미지 + (이름+소개)가 들어가는데 이때 이름과 소개는 다시 Column 안의 자식으로 들어간다. 그리고 Column 기준 반대축인 왼쪽으로 텍스트를 정렬한다.
CircleAvatar 원 안에 이미지 넣기
CircleAvatar 사이즈 조절
- radius
- SizedBox → 사이즈 속성이 없는 위젯의 경우 SizedBox 사용
Row(프로필 이미지 + 이름 + 소개) 위젯으로 추출하기 (MHeader) → Component
텍스트 + 텍스트 + 텍스트 → Row
Column (텍스트 + 텍스트) * 3 + Container * 2
Row 내부에 텍스트 두개가 Column으로 들어간다. 그리고 이렇게 만들어진 Column을 구분짓는 선은 Container로 만든다.
Row의 메인축을 기준으로 spaceAround를 통해 자식 위젯들 사이에 동일한 간격을 두고, 시작과 끝에도 같은 간격의 절반을 배치한다.
Row 위젯으로 추출하기 + Component
Button 만들기
Share article