8. user update page 구현

User Info Page

 현재 두가지 버전으로 user정보를 가져오는데 obx로 상태관리를 할때 argument로 가져온 데이터는 상태가 바뀌어도 ui가 변하지 않음

Obx(() => Column(
  children: [
    // argument 로 가져오는 데이터는 상태가 바뀌지 않음
    Text("회원 argument 유저네임: ${user.name}"),
    Text("회원 argument 이메일: ${user.email}"),
    Text("회원 argument nickname: ${user.nickname}"),
    Text("회원 유저네임 : ${a.firestoreUser.value!.name}"),
    Text("회원 이메일 : ${a.firestoreUser.value!.email}"),
    Text(
    "회원 nickname : ${a.firestoreUser.value!.nickname}"),
  ],
  )),
  SizedBox(height: 10),
  Padding(
    padding: const EdgeInsets.all(16.0),
    child: CustomElevatedButton(
    	text: "회원정보 수정",
    	funPageRoute: () {
    		Get.to(() => UserInfoUpdatePage(), arguments: user);
  	}),
),

User Update Page

Get.back을 통해 페이지 히스토리 관리

추후 update 결과에 따른 분기를 통해 페이지 이동 유무 넣기

class UserInfoUpdatePage extends StatelessWidget {
  final _formkey = GlobalKey<FormState>();
  final _nickname = TextEditingController();
  final _email = TextEditingController();
  UserModel user = Get.arguments;

  @override
  Widget build(BuildContext context) {
    _nickname.text = "${user.nickname}";
    _email.text = "${user.email}";
    return Scaffold(
        appBar: AppBar(
          title: Text("UserInfo Update"),
        ),
        body: ListView(
          children: [
            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,
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Center(
                child: _userInfoForm(),
              ),
            ),
          ],
        ));
  }

  Widget _userInfoForm() {
    return Form(
      key: _formkey,
      child: Column(
        children: [
          CustomTextFormField(
            controller: _nickname,
            hint: "Nickname",
            funValidator: validatorUsername(),
          ),
          SizedBox(height: 15),
          CustomElevatedButton(
            text: "회원 정보 수정",
            funPageRoute: () async {
              _formkey.currentState!.validate();
              UserController.to.updateUserDetail(_nickname.text, user.uid!);
              Get.back();
            },
          ),
          SizedBox(height: 15),
          CustomElevatedButton(
            text: "취소",
            funPageRoute: () {
              Get.back(closeOverlays: true);
            },
          ),
        ],
      ),
    );
  }
}

Controller

uid를 넘겨야 firebase user collection의 현재 로그인한 유저 정보를 찾을 수 있음

  Future<void> updateUserDetail(String nickname, String uid) async {
    await _userRepository.updateUserDetail(nickname, uid);
  }

UpdateReqDto

업데이트할 정보를 json으로 넘겨주기 위한 클래스

uid는 업데이트 할 필요없기 때문에 toJson의 파라미터 값으로 넣지 않음

class UpdateReqDto {
  final String? uid;
  final String? nickname;

  UpdateReqDto({this.nickname, this.uid});
  Map<String, dynamic> toJson() => {
        "nickname": nickname,
      };
}

Repository

  Future<void> updateUserDetail(String nickname, String uid) async {
    UpdateReqDto updateUser = UpdateReqDto(nickname: nickname, uid: uid);
    await _userProvider.updateUserDetail(updateUser);
  }

Provider

  Future<void> updateUserDetail(UpdateReqDto user) async =>
      await firebaseFirestore.doc('/users/${user.uid}').update(user.toJson());

Git commit

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

user update page 구현 · mugon-dev/flutter_firebase_blog@b633854