[플러터 오픈소스-채팅6] 프로젝트 구조 파악하기

1- https://explsoratory.tistory.com/16

2-https://explsoratory.tistory.com/17

3-https://explsoratory.tistory.com/18

4-https://explsoratory.tistory.com/19

5-https://explsoratory.tistory.com/20

6-https://explsoratory.tistory.com/21

7-https://explsoratory.tistory.com/22

 

대충 코드가 돌아가게는 만들었지만 그 코드를 100%이해한건 아니다. 그럼지금부터 파헤쳐보자?

일단 스크린별로 설명하려고하는데, 그래도 플러터의 진입점은 main.dart이니  .. 진입점부터 시작해서 스크린별로 넘어가보자.

 

 

1.main.dart

얘가하는 일은 단순하다, 웬만한 것들의 초기화도 여기서하고.  시작점이기에 바로 대시보드를 보여주는 경우도있다. 근데 지금 이 앱의 경우에는 실행을하면 로딩스크린이 먼저나온다.

분명 main.dart가 진입점이라고 했는데?  맞다.

 

main.dart :웬만한 것들 초기화 -> 로딩스크린 띄움   이렇게 순서가 진행된다. 

 

이곳에서는 파이어베이스 초기화와 멀티프로바이더를 지정하는데, 이 멀티프로바이는 데이터를 관리하기위한 놈들이라고 생각하면된다. 생각해보자 해당앱은 로그인페이지, 셋팅페이지, 홈페이지 , 채팅페이지등 다양한 스크린에서 각각의 데이터를 다뤄야한다.  페이지에따라 사용하는 데이터가 다르고, 이 데이터를 쉽게관리하기 위해서 각 페이지별 매니저?를 둔거다. 

 

매니저에게 그 페이지에 필요한 정보를 전달해서 알아서 매니징하게 하는 것이다.

사실이렇게안해도된다. 무식하게 ???쉽게?? 직관적이게?? 모든 데이터를 하나의 서비스에 넣어서 거기서 알아서 각 페이지가 읽게할 수도있고.  뭐 겟엑스같은 라이브러리로 따로 컨트롤러를 만들어서 관리할 수 도 있다.

근데 멀티프로바이더를 사용한는 것도 추천되는 방법 중 하나이다. 

2.splash_page.dart

그럼 이제 메인에서 로딩스크린으로 넘어왔다. 다들 알다시피 해당페이지에서는 그냥 로딩시에 보여줄 화면을 띄운다. 

 

 

 

login_page.dart

다음은 로그인 페이지이다. splash_page다음에 바로나오는 로그인 페이지.

보다시피 기능은 1개다. 구글 로그인.

 

구글 로그인 코드

아래 코드라인을 보면, authProvider라는 걸 통해서 구글 로그인을 가능하게 하고있다. 그럼 뭐 대충 진짜 로그인 핸들링 해주는건 authprovider라고 할 수 있다. 그럼 auth Provider한번 보고올까? 참고로 이 프로바이더(=매니저)는 메인에서 이미 지정했다.

 

auth_provider.dart

이곳은 스크린을 보여주는건 아니지만 구글관련한 인증 정보를 핸들링 하는 곳이다.  뭐하러이게있냐고 ? 맞다. 그냥 로그인 페이지에서 바로처리할 수도있다. 그러나 이렇게 프로바이더를 통해 로직과 스크린을 나눠주면 관리하기 쉽다.(마치 겟엑스에서 컨트롤러와 스크린을 분리하듯)

handleSignout(): 로그아웃처리를 한다. 

isLoggedIn() : 현재 로그인 상태를 체크한다, 이전에 이미로그인했엇다면. 재 실행시에는 로그인스크린이 나오지 않는다. 그게 바로 여기서 확인는 거다.

handleSignIn() : 로그인을 처리한다. 로그인 버튼을 눌렀을 때, 유저가 다시 그 로그인을 취소했는지? 또는 로그인을 정상적으로 했는지?

로그인을 정상적으로 했다? 그럼 해당 유저의 정보를 데이터베이스와 로컬스토리지(=캐시)에다가 저장한다. 

 

(*데이터베이스는 알겠는데 왜 굳이 캐시에다가 저장하나요? : 캐시에다가 저장하면 더 빠르고 작업이가능합니다. 매번 데이터베이스를 안불러도되고 처리가 바로바로되니깐요!)

따라서 이 메소드에서는 현재 유저의 로그인 상태를 알 수 있고, 항상 메소드마지막에  notifylistener()를 한다.

이 말은, 유저의 로그인 상태를 누구한테 계속 알려준다는 얘기인데 바로 이게 로그인 페이지이다. 다시 로그인 페이지로 돌아가보자

 

login_page.dart

로그인 페이지 윗부분을 보면 이 코드라인이 있고, 이게바로 auth_provider에서 유저의 상태를 알려주는 걸 듣고 있다는 소리다.

 

login_page.dart

 

또한 로그인이 성공했을시, materialPagRoute를 통해서 homepage로 넘어가고있다.

 

home_page.dart

일단 build메소드를 보면, 가장처음 buildsearchbar()를 통해 서치바를 만들고있다.

popupmenu()를 통해 오른쪽위  ...을 누르면 목록도보여주고.

 

또한  서치바 텍스트에따른 유저목록을  steambuilder를 통해 보여주고있다.

유저목록은 그 안에 buildItem()을 사용하고있다.

아래 유저목록에서 보듯이 가장 왼쪽에는 프로필 사진을 보여주고 그옆에 닉네임과 어바웃미를 보여주고있다.

 

세팅버튼을 누르면 -> setting_page.dart로

로그아웃은 login_page.dart로

유저목록을 누르면 chat_page.dart로  이건 단순한 내비게이션들이고..

 

 

 

 

 

여기서 가장 중요하게 봐야할껀 바로 flutter_local_notifications 부분이다.  아래코드를 보면 알 수 있지만 토큰을 사용해서 유저의 기기를 등록한다(왜??? 노티피케이션 보내야하니까)  .여기서 노티피케이션을 보내는 방법은 firebaseconsole에서 보내는거고.  만약 코드내에서 다른 사람이 채팅할때 노티피케이션을 보내려하면, extension링크를 통해 이부분을 작성해야한다.

 

 

 

 

 

그럼 여기까지하면 home_page.dart는 완료다.

 

setting_page.dart

단순한 파이어베이스 업데이트다. 사용자가 본인  유저세팅을 변경할 수 있는 페이지이다.

 

 

마지막으로는 chat_page.dart다. 내용이 조금 길어져서 다름 포스팅에 ...