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

Jun 08, 2025

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

Contents

1. 폼 나누기 2. Form → 위젯으로 login_form.dart로 분리하기 3. FM 만들기 4. 사용자 입력 값 상태에 넣기 5. 통신 6. session_gvm에서 통신 7. User model 만들고 login 비지니스 로직 수정

1. 폼 나누기

floatingAction버튼 삭제하기

Form으로 만들기

Form - Column으로 감싼 코드

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

3. FM 만들기

다른 컴포넌트 안에 들어가있을 수도 있으므로 같은 화면에 없게 되면 TextEditingController로 몬함 → riverpod로 하자

vm을 복사하면 안되고 fm을 복사해서 수정해야됨!!!!

창고 데이터 타입

창고

창고 관리자

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

login_form과 join_form을 비교하면서 참고하면서 작성하면 된다!

sublime text로 띄워놓고 비교하면서 플젝하세용

FM 가져오기

onChanged

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

로그 찍어보기

에러 텍스트 추가

페이지 이동 위임

위임 후

login은 viewmodel에 의존

5. 통신

UserRepository login 메서드 만들기

6. session_gvm에서 통신

유효성 검사 + 통신

비지니스 로직

로그인 성공

로그인 실패

이제 다른 페이지에서도 토큰 SessionModel model = ref.read(sessionProvider)로 꺼내서 쓸 수 있음

로그아웃은 dio 비우고 sessionModel 비우고 sercureStorage 비우면 됨 (거꾸로 간다) - 서버에 요청할 필요 없음!

7. User model 만들고 login 비지니스 로직 수정


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 객체로 만들어서 사용하기

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)'; } }