[Flutter] 25. 모두의 블로그 앱 만들기 (3) - 로그인 페이지

김주희's avatar
Jun 08, 2025
[Flutter] 25. 모두의 블로그 앱 만들기 (3) - 로그인 페이지

1. 폼 나누기

floatingAction버튼 삭제하기

notion image
 

Form으로 만들기

notion image
 

Form - Column으로 감싼 코드

notion image
 

2. Form → 위젯으로 login_form.dart로 분리하기

notion image
 
notion image
 

3. FM 만들기

다른 컴포넌트 안에 들어가있을 수도 있으므로 같은 화면에 없게 되면 TextEditingController로 몬함 → riverpod로 하자
 
vm을 복사하면 안되고 fm을 복사해서 수정해야됨!!!!
notion image
 

창고 데이터 타입

notion image
 

창고

notion image
 

창고 관리자

notion image
 

4. 사용자 입력 값 상태에 넣기

login_form과 join_form을 비교하면서 참고하면서 작성하면 된다!
sublime text로 띄워놓고 비교하면서 플젝하세용

FM 가져오기

notion image
 

onChanged

onChanged 해야하는 이유? ~ 1:44:00
notion image
 

로그 찍어보기

notion image
 

에러 텍스트 추가

notion image
 

페이지 이동 위임

notion image
 
위임 후
notion image
 
login은 viewmodel에 의존
 

5. 통신

UserRepository login 메서드 만들기

notion image
 
notion image
 

6. session_gvm에서 통신

유효성 검사 + 통신

notion image
 

비지니스 로직

notion image
 

로그인 성공

notion image
 

로그인 실패

notion image
 
 
이제 다른 페이지에서도 토큰 SessionModel model = ref.read(sessionProvider)로 꺼내서 쓸 수 있음
 
로그아웃은 dio 비우고 sessionModel 비우고 sercureStorage 비우면 됨 (거꾸로 간다) - 서버에 요청할 필요 없음!
 
 
class User { int? id; String? username; String? imgUrl; String? accessToken; User({ this.id, this.username, this.imgUrl, this.accessToken, }); User.fromMap(Map<String, dynamic> data) : id = data['id'], username = data['username'], imgUrl = data['imgUrl'], accessToken = data['accessToken']; @override String toString() { return 'User(id: $id, username: $username, imgUrl: $imgUrl, accessToken: $accessToken)'; } }
 
창고 모델이 아니라서 final 아님
User 객체로 만들어서 사용하기
notion image
Share article

jay0628