오늘의 주제
- 플러터를 이용한 사용자 인터페이스 개발 기초
- 내비게이션 사용 방법 학습
오늘의 목표
- 플러터의 내비게이션 개념을 이해한다.
- 라우트와 내비게이터의 개념을 학습한다.
- 기본적인 화면 전환 방법을 익힌다.
- 데이터를 전달하면서 화면을 전환하는 방법을 학습한다.
- 내비게이션 2.0의 개념과 사용법을 이해한다.
- 라우터 델리게이트와 정보 분석기의 역할을 파악한다.
오늘의 미션
- 기본 내비게이션 구현하기
- (미션 1-1) 두 개의 화면(HomeScreen과 DetailScreen)을 만들고, HomeScreen에서 버튼을 눌러 DetailScreen으로 이동하는 앱을 만드세요. DetailScreen에는 뒤로 가기 버튼을 추가하여 HomeScreen으로 돌아갈 수 있게 만드세요.
- (답을 여기에 작성)
- (미션 1-2, 심화) 레시피 앱 만들기 - 기본 내비게이션
- 레시피 목록 화면과 상세 레시피 화면으로 구성된 간단한 요리 레시피 앱을 만드세요. 목록에서 레시피를 탭하면 상세 화면으로 이동하고, 상세 화면에서는 뒤로 가기 버튼으로 목록으로 돌아갈 수 있게 만드세요.
- (답을 여기에 작성)
- 데이터 전달하며 화면 전환하기
- (미션 2-1) HomeScreen에서 DetailScreen으로 이동할 때 문자열 데이터를 전달하고, DetailScreen에서 이를 표시하는 앱을 만드세요.
- (답을 여기에 작성)
- (미션 2-2, 심화) 쇼핑몰 앱 만들기 - 데이터 전달과 화면 전환
- 상품 목록, 상품 상세, 장바구니 화면으로 구성된 간단한 쇼핑몰 앱을 만드세요. 상품 목록에서 상품을 선택하면 상세 화면으로 이동하고, 상세 화면에서 "장바구니에 담기" 버튼을 누르면 장바구니 화면으로 이동하면서 선택한 상품 정보를 전달하도록 구현하세요.
- (답을 여기에 작성)
- Named 라우트 사용하기
- (미션 3-1) Named 라우트를 사용하여 HomeScreen, DetailScreen, SettingsScreen 세 개의 화면을 전환하는 앱을 만드세요.
- (답을 여기에 작성)
- (미션 3-2, 심화) 뉴스 앱 만들기 - Named 라우트 사용
- 뉴스 목록, 뉴스 상세, 설정 화면으로 구성된 뉴스 앱을 만드세요. Named 라우트를 사용하여 화면 간 이동을 구현하고, 하단 네비게이션 바를 통해 뉴스 목록과 설정 화면으로 이동할 수 있게 만드세요.
- (답을 여기에 작성)
- Named 라우트 사용하기
- (미션 4-1) Named 라우트를 사용하여 HomeScreen, DetailScreen, SettingsScreen 세 개의 화면을 전환하는 앱을 만드세요.
- (답을 여기에 작성)
- (미션 4-2, 심화) 소셜 미디어 앱 만들기 - 내비게이션 2.0 사용
- 피드, 프로필, 알림 화면으로 구성된 간단한 소셜 미디어 앱을 만드세요. 내비게이션 2.0을 사용하여 화면 전환을 구현하고, 하단 탭을 통해 각 화면으로 이동할 수 있게 만드세요. 또한 피드에서 게시물을 탭하면 해당 게시물의 상세 화면으로 이동하도록 구현하세요.
- (답을 여기에 작성)
- 동적 라우트 등록하기
- (미션 5-1) onGenerateRoute를 사용하여 동적으로 라우트를 생성하는 앱을 만드세요. '/item/:id' 형식의 라우트를 처리하여 DetailScreen을 표시하도록 구현하세요.
- (답을 여기에 작성)
- (미션 5-2, 심화) 여행 예약 앱 만들기 - 동적 라우트 등록
- 여행지 목록, 여행지 상세, 예약 화면으로 구성된 여행 예약 앱을 만드세요. onGenerateRoute를 사용하여 동적으로 라우트를 생성하고, '/destination/:id'와 '/booking/:id' 형식의 라우트를 처리하여 각각 여행지 상세와 예약 화면을 표시하도록 구현하세요.
- (답을 여기에 작성)
오늘의 회고
- 오늘 학습한 내용 중 가장 유용했던 점:
- 어려웠던 부분과 해결 방법:
- 앞으로 더 학습이 필요한 부분:
- 학습한 내용을 실제 프로젝트에 어떻게 적용할 수 있을지: