[내배캠 앱창업] Day 16 - Flutter 앱 실습

쏘쏠·2025년 12월 15일

1. 오늘 한 거

스토어 앱(챕터1-5) UI 만들면서 기본 레이아웃 위젯 연습

Column / Row로 화면 구조 나누기

Text, Image.asset로 요소 배치

SafeArea로 상태바 영역 겹침 방지

Spacer, Padding, Expanded, SizedBox로 정렬/간격/높이 조정

DevTools(Widget Inspector)로 위젯이 차지하는 공간 확인

레시피 앱(챕터1-6) 컴포넌트 익히기

RecipeTitle / RecipeMenu / RecipeListItem 파일로 분리

AppBar, Icon, Container 사용

ListView로 스크롤 처리(overflow 해결)

AspectRatio, ClipRRect로 이미지 비율/모서리 라운드 처리

폰트 적용: pubspec.yaml에 폰트 등록 → ThemeData(fontFamily)로 전체 적용

2. 배운 내용 정리

화면 레이아웃 잡는 기본 위젯

Column: 세로로 배치

Row: 가로로 배치

mainAxisAlignment / crossAxisAlignment: 정렬 기준(주축/교차축) 잡기

간격/여백/크기 조절 위젯

Padding: 위젯 바깥에 여백 주기 (EdgeInsets.all / symmetric / only)

Spacer: 남는 공간을 차지해서 사이 간격 균등하게 벌리기

Expanded: 남는 공간을 꽉 채우게 만들기(특히 Column에서 이미지 높이 채울 때)

SizedBox: 고정 크기 or 빈 공간(예: 이미지 사이 간격 height: 2)

Scaffold / SafeArea / AppBar 감 잡기

Scaffold: 화면 뼈대(앱 구조) 잡는 기본 틀

SafeArea: 상태바/노치 영역 피해주기

AppBar: 상단 고정 영역, actions에 아이콘 배치 가능

이미지 다루기

Image.asset: assets 폴더 이미지 가져오기

fit: BoxFit.cover 등으로 채우는 방식 조절

AspectRatio: 이미지 비율 고정

ClipRRect: 이미지 모서리 둥글게

컴포넌트화(재사용) 포인트

UI를 통째로 한 파일에 쓰면 길어지고 수정이 힘듦 → 위젯 분리

반복되는 UI는

함수로 빼기(예: menuItem(icon, text))

또는 위젯 생성자로 데이터 받게 만들기(예: RecipeListItem(assetName, title))

오늘 핵심:

화면은 레이아웃 먼저 나누고, 반복되는 부분은 재사용 가능한 형태(함수/위젯)로 만들면 훨씬 편함

3. 내일 할 일

Flutter 강의 완강 도전해보기

내일도 화이팅!

profile
Flutter 앱창업 일기장

0개의 댓글