✔️학습내용 요약

• Widget을 분리해서 import하는 방법을 배움
• 기본 Widget으로 레이아웃 구성하는 방법을 배움

1. Widget 분리하기

• Widget를 분리하는 이유? 코드의 가독성과 유지보수성 향상
• Widget를 분리하면 좋은 경우
  • 동일한 UI를 여러 번 사용할 때
  • 하나의 Widget이 너무 커질 때
  • 역할을 명확하게 나누고 싶을 때
• main.dart 파일에서 import '/workout_list_page.dart';
• workout_list_lage.dart 파일에서 import 'package:flutter/material.dart'; 추가

참고-절대경로, 상대경로

구분	상대경로	절대경로(package)
기준	현재 파일	프로젝트(lib)
작성 예시	widgets/menu_card.dart	package:my_app/widgets/menu_card.dart
유지보수	상대적으로 어려움	쉬움
권장 여부	소규모 프로젝트	⭐ Flutter 권장

2. List UI 구성하기

• List 형태의 화면을 만들면서 Flutter의 기본 Widget을 활용한 레이아웃 구성
• AppBar Widget: 화면 상단의 제목과 액션 버튼을 포함한 Navigation Bar 구성
• Column Widget: Widget을 세로 방향으로 배치하는 레이아웃
• Row Widget: Widget을 가로 방향으로 배치하는 레이아웃
• DecorationImage: Container의 배경 이미지를 설정하는 데 사용
• Alignment: Widget의 위치와 정렬을 제어하는 속성

3. Expanded Widget 활용

• Expanded를 사용하는 이유
  • Row나 Column 안의 Widget은 기본적으로 자신의 크기만큼만 공간을 차지하는데,
  • Expanded를 사용해서 남아 있는 공간을 자동으로 채워 반응형 레이아웃을 쉽게 구성 가능

4. 반복되는 Widget 제어

• Helper Function: 반복되는 Widget을 함수로 분리하여 코드 재사용
• Overflow: 화면을 벗어나는 레이아웃 오류의 원인과 해결 방법
• WorkoutListPage 구현: 지금까지 학습한 Widget을 활용하여 리스트 화면 완성

//filename:workout_list_page.dart
List<Row> getWorkoutList(){
  return [];
}

---

📝수강후기

• Widget 활용해서 화면 구성하는 방법을 배우면서 어떻게 프로그래밍해야 가독성이 좋고, dart를 이해하는지 알 수 있어서 좋았다.
• Expanded 앞으로도 많이 활용할 거 같아서 여러 번 공부해야 할 거 같았다.
• 반복되는 Widget 부분은 추후에 응용하고 싶어서 가슴이 콩닥거렸다...💓 오랜만에 느껴본 가슴 떨림이라 빨리 프로젝트 시작하고 싶다.