[TIL-3] - Flutter 당근마켓 앱 만들기 Part 01

TIL - Flutter 당근마켓 앱 만들기 Part 01

📌 오늘 한 일

• Flutter로 마켓 앱 UI 기초 뼈대 구축
• Riverpod 세팅 및 페이지 라우팅 구현
• WelcomePage & LoginPage UI 레이아웃 작업
• 커스텀 TextFormField 위젯 구성 및 유효성 검사 유틸 추가

---

🛠️ 프로젝트 구조

MVVM 구조로 폴더 정리

• 주요 페이지: WelcomePage, LoginPage, JoinPage, HomePage
• 기타: ProductDetailPage, ProductWritePage, ChatDetailPage, AddressSearchPage

---

📱 WelcomePage 구현

• 이미지: assets/welcome.png
• 텍스트: "당신 근처의 마켓", 설명 텍스트
• 버튼: 시작하기 → 주소 검색 페이지 이동
• 링크: 로그인 → 로그인 페이지 이동
• 레이아웃: SafeArea + Column + Spacer로 구성

✅ 버튼 테마 전역 설정 (main.dart)

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ButtonStyle(
    foregroundColor: WidgetStatePropertyAll(Colors.white),
    backgroundColor: WidgetStatePropertyAll(Colors.orange),
    minimumSize: WidgetStatePropertyAll(Size.fromHeight(50)),
    textStyle: WidgetStatePropertyAll(TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
    shape: WidgetStatePropertyAll(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    )),
  ),
)

---

🔐 LoginPage 구현

✨ 유효성 검사 유틸 함수

ValidatorUtils.validatorId(String? value)
ValidatorUtils.validatorPassword(String? value)
ValidatorUtils.validatorNickname(String? value)

📦 커스텀 TextFormField 위젯

• IdTextFormField
• PwTextFormField
• NicknameTextFormField

→ 재사용성과 가독성을 높임

💡 키보드 대응

ListView로 감싸서 키보드 올라올 때 UI 깨짐 방지

---

🔄 기타 작업

• flutter pub add flutter_riverpod
• ProviderScope로 앱 전체 감싸기
• pubspec.yaml에 assets/ 등록

 

---

🤔 회고

• SafeArea, Spacer, SizedBox.expand로 레이아웃 컨트롤이 쉬워짐
• Riverpod 구조 도입으로 상태 관리 대비
• 유효성 검사 및 위젯 분리로 유지보수 쉬움