Flutter Instagram Clone #9 FirebaseUser 정보 표시하기

jakeseo_me·2020년 7월 27일
0

Flutter-Instagram-Clone

목록 보기
9/14

Flutter Instagram Clone #9 FirebaseUser 정보 표시하기

원본 강의

https://www.inflearn.com/course/flutter-%EC%9E%85%EB%AC%B8/dashboard

여기서 유료 결제를 해서 듣고있는 강의의 내용을 개인적인 공부 목적으로 지식 위주로 정리해봅니다.

할 일

위와 같이 Home 화면, Account 화면에 FirebaseUser로 부터 가져온 정보를 표시해보자.

TabPage에서 HomePage로 정보 넘겨주기

widget 사용하기

정보를 넘겨주려면 기존에 TabPage 에서 생성한 final FirebaseUser userHomePage로 넘겨주어야 한다.

넘겨주는 방법은 HomePage()를 호출할 때, 아규먼트로 넘겨주는 것이다. _TabPageState에서 TabPage에 있는 정보를 가져오는 방법은 widget을 사용하는 것이다.

위와 같이 사용하면, TabPage 클래스의 user를 넘겨줄 수 있다. 빨간줄이 표시된 것은 HomePage에서 아규먼트를 받는 코드가 없어서 그렇다.

argument 받기

이렇게 HomePage에서 아규먼트를 받는 부분을 추가하면 된다.

다시 widget 사용하기

위의 코드를 그대로 실행시키면 에러가 발생하는데, 타이밍 이슈 때문에 그렇다. TabPage가 실행되는 것과 비동기로 _TabPageState가 발생하는 것 같다. 아마 라이프사이클을 봐야 알 것 같은데...

어쨌든 그런 타이밍 이슈로 initState라는 것을 오버라이드해서 그 안에서 widget 키워드를 사용해야 한다.

위와 같이 해주면 된다.

라이프사이클을 잠시 살펴보면 ...

created 생성자 이후에 바로 initState가 실행되는 것을 알 수 있다. 그리고 build가 수행되고 build 이후에는 didUpdateConfigsetState가 수행되어 상태가 또 변할 수 있고 이후에 dispose가 수행된다.

이 링크 에서 라이프사이클의 세부사항을 알 수 있다.

아무튼 라이프사이클에 맞게 상태를 작성해주도록 하자.

initState의 설명을 잠깐 읽어보면 ...

오브젝트가 트리로 삽입되었을 때 호출됩니다. 프레임워크가 만드는 각각의 상태 오브젝트에 대해 프레임워크가 이 메소드를 정확히 한 번 호출할 것입니다. 오브젝트가 트리로 들어가는 장소(예를들면 컨텍스트) 또는 이 오브젝트를 설정하기 위해 사용되는 위젯에서 이 메소드를 오버라이드 하십시오. 만일, 상태의 빌드 메소드가 그 자체의 상태를 변경시킬 수 있는 오브젝트 (이를테면 ChangeNotifier 또는 Stream) 나 또는 알람을 받기 위해 구독할 수 있는 어떤 다른 오브젝트에 의존한다면, initStatedidUpdateWidget에서 구독과 구독해지를 Padding(padding: EdgeInsets.all(8.0)),확실히 해주십시오. - initState에서는 오브젝트에 구독합니다. / - didUpdateWidget에서는 업데이트된 위젯 설정이 오브젝트 대체를 요구한다면, 오래된 오브젝트에 구독 해지를 하고 새로운 것에 구독을 합니다. / - 삭제 시에는 오브젝트로부터 구독 해지합니다.

FirebaseUser에서 정보 가져오기

기존에 생성했던 CircleAvatar 부분의 NetworkImage에 들어가는 pathuser.photoUrl로 고쳐주면 된다.

hot-reload 시에 photoUrlnull에서 실행됐다느니 그런 에러가 뜬다면, 앱을 한번 껐다 켜주자.

그리고 이메일 주소와 이름은 각각 user.email, user.displayName 속성을 이용하여 가져오자.

AccountPage에 가서도 똑같이 적용해준다.

그러면 결과적으로

이렇게 내 구글 계정에서 이미지와 이름을 가져올 수 있다.

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글