Column / Row로 화면 구조 나누기
Text, Image.asset로 요소 배치
SafeArea로 상태바 영역 겹침 방지
Spacer, Padding, Expanded, SizedBox로 정렬/간격/높이 조정
DevTools(Widget Inspector)로 위젯이 차지하는 공간 확인
RecipeTitle / RecipeMenu / RecipeListItem 파일로 분리
AppBar, Icon, Container 사용
ListView로 스크롤 처리(overflow 해결)
AspectRatio, ClipRRect로 이미지 비율/모서리 라운드 처리
폰트 적용: pubspec.yaml에 폰트 등록 → ThemeData(fontFamily)로 전체 적용
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))
화면은 레이아웃 먼저 나누고, 반복되는 부분은 재사용 가능한 형태(함수/위젯)로 만들면 훨씬 편함
Flutter 강의 완강 도전해보기
내일도 화이팅!