7. user info page 구현

참고

앱 시작시 AuthController의 onReady에서 authStateChanges를 관찰하고 있기 때문에  로그아웃을 하지 않으면 자동 로그인이 되며 유저 정보 또한 저장되어 있음

AuthContorller

  Rxn<User> firebaseUser = Rxn<User>();
  Rxn<UserModel> firestoreUser = Rxn<UserModel>();

  @override
  void onReady() {
    // TODO: implement onReady
    super.onReady();
    //run every time auth state changes
    ever(firebaseUser, handleAuthChanged);
    firebaseUser.bindStream(user);
  }

  handleAuthChanged(_firebaseUser) async {
    //get user data from firestore
    if (_firebaseUser?.uid != null) {
      firestoreUser.bindStream(streamFirestoreUser());
    }
    if (_firebaseUser == null) {
      Get.offAll(() => LoginPage());
    } else {
      Get.offAll(() => HomePage());
    }
  }

  // Firebase user a realtime stream
  Stream<User?> get user => auth.authStateChanges();

  //Streams the firestore user from the firestore collection
  Stream<UserModel> streamFirestoreUser() {
    print('streamFirestoreUser()');

    return firebaseFirestore
        .doc('/users/${firebaseUser.value!.uid}')
        .snapshots()
        .map((snapshot) => UserModel.fromMap(snapshot.data()!));
  }

1. user info 페이지 이동할때 argument에 넣어 이동

home page

UserModel user = await AuthController.to.getFirestoreUser();
Get.to(() => UserInfo(), arguments: user);

2. user info 페이지에서 불러오기

user info page

AuthController a = Get.put(AuthController());

Text("회원 유저네임 : ${a.firestoreUser.value!.name}")

UserInfoPage

class UserInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // UserController u = Get.put(UserController()); 앱 재시작할때 데이터가 없음
    AuthController a = Get.put(AuthController());
    UserModel user = Get.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text("userInfo"),
      ),
      body: Container(
        width: double.infinity,
        child: Column(
          children: [
            SizedBox(height: 50),
            Container(
              width: 120,
              height: 120,
              child: Center(
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: Container(
                    width: 100,
                    height: 100,
                    child: Image.network(
                      "https://i.stack.imgur.com/l60Hf.png",
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: 50),
            Text("회원 argument 유저네임: ${user.name}"),
            Text("회원 argument 이메일: ${user.email}"),
            Text("회원 유저네임 : ${a.firestoreUser.value!.name}"),
            Text("회원 이메일 : ${a.firestoreUser.value!.email}"),
            // Text("회원 가입날짜 : ${u.principal.value.created}"),
          ],
        ),
      ),
    );
  }
}

Git Commit

https://github.com/mugon-dev/flutter_firebase_blog/commit/2fe2b322187d351f1f13f3881d3cdeca84e464db

user info 페이지 구현 argument 방식과 controller 방식 · mugon-dev/flutter_firebase_blog@2fe2b32

https://github.com/mugon-dev/flutter_firebase_blog/commit/a2dc7b26d321ae2bb9e2b7d9cf318b49ae93aae5

user info 페이지에 프로필 사진 UI 추가 · mugon-dev/flutter_firebase_blog@a2dc7b2