Created at : 2025-01-27 04:27
Auther: Soo.Y
📝메모
문제
이전 프로젝트를 계속 진행하여 다음 4개의 화면을 구현합니다.
(1) Confirmation Code Screen:
- 사용자는 이전 과제의 계정 생성 화면에서 “가입”을 누른 후 이 화면으로 이동합니다.
- 이 화면에는 확인 코드를 입력할 수 있는 4개의 입력란이 있습니다.
- 사용자가 입력란에 글을 쓰면 입력란 아래에 녹색 아이콘이 표시되고 “다음” 버튼이 활성화되어야 합니다.
- 사용자가 “다음”을 누르면 “비밀번호” 화면으로 이동합니다.
(2) Password Screen:
- 이 화면에는 비밀번호를 입력할 수 있는 양식이 하나 있습니다.
- 사용자가 비밀번호를 입력하면 입력 옆에 녹색 아이콘이 표시되고 “다음” 버튼이 활성화되어야 합니다.
- 비밀번호 입력에는 비밀번호의 표시 여부를 전환하는 눈 아이콘이 있어야 합니다.
- 사용자가 “다음”을 누르면 “관심사” 화면으로 이동합니다.
(3) Interests Screen:
- 이 화면에는 사용자가 관심사를 선택할 수 있는 세로 스크롤뷰가 있습니다.
- 사용자가 “다음” 버튼을 활성화하려면 최소 3개의 관심사를 선택해야 합니다.
- 관심사가 선택되면 파란색 배경과 흰색 텍스트가 표시됩니다.
- 사용자가 “다음”을 누르면 “관심사 파트 2” 화면으로 이동합니다.
(4) Interests Part Two:
- 이 화면에는 사용자가 관심사를 선택할 수 있는 가로 스크롤뷰가 많이 있습니다.
- 관심사를 선택하면 파란색 배경과 흰색 텍스트가 표시됩니다.
- 사용자가 “다음” 버튼을 활성화하려면 최소 3개의 관심사를 선택해야 합니다.
TA’s 힌트
- 여러 개의 input 으로 입력받아 validate 하는 법, 상태 변화에 따라 아이콘과 버튼을 바꾸는 연습을 할 수 있는 과제 입니다.
- 자세히 보시면 첫 화면의 이메일 계정은 이전 과제 화면에서 가입시에 입력했던 이메일 입니다.
- 6 자리 OTP 입력의 경우 6 개의 TextEditingController 를 사용하는법, 하나의 Form과 GlobalKey 를 사용하는 방법 모두 구현 가능합니다.
- 필수 요구사항은 아니지만 이번 범위의 강의에서 배웠던 스크롤에 대한 애니메이션, 두 Widget의 변화에 애니메이션을 주는 AnimatedSwitcher, 버튼의 상태변화에 대해 AnimatedContainer 적용도 연습해보면 더 좋을 것 같습니다.