E-Commerce >> 2일차 [1]

어플 구현 따라하기
김인범's avatar
Feb 19, 2025
E-Commerce >> 2일차 [1]

로그인 화면 구현

SingleChildScrollView 위젯을 사용해서 구현했다.
child 속성에 SafeArea 위젯을 넣어주고,
SafeArea 위젯에 Column 위젯을 사용한다.
이후 TextFormField 위젯을 나열하여 입력칸을 만들어 주었다.

코드 일부

notion image

로그인 화면

notion image

회원가입 페이지 구현’

로그인 페이지에서 Sign Up을 누르면 이동하게 해야한다.

로그인 페이지 코드 중 해당되는 코드

notion image
Sign Up 문자의 부분을 TextButton 위젯으로 만들어주고,
해당 위젯의 onPressed를 사용하여 페이지 이동이 가능하게 만들어주었다.

Sign Up 터치 이후 나오는 회원가입 페이지

notion image

비밀번호 찾기 페이지 구현

로그인 페이지에서 사용자가 비밀번호를 까먹고 찾고 싶을 때, 사용되는 페이지를 구현한다.
notion image
화살표가 가리키는 곳을 터치했을 때 이동하게 끔 해주었다.

로그인 페이지 코드 중 해당되는 코드

회원가입과 마찬가지로 동일한 방식이다.
Alignment.bottomRight를 사용해 위치를 조정했다.
notion image
 
Share article

taker