이번 GDG 플러터 프로젝트에서

우리팀은 상태관리를 GetX로 진행하기로 했다.

 

그동안 거의 GetX만 사용하던 나에겐 그나마 위로가 되었다.

GetX를 초심부터 배우자는 마음으로 이번시간에는

플러터 프로젝트를 만드면 나오는 기본 카운터를 GetX으로 바꾸어 보도록하겠다.

 

https://pub.dev/packages/get/install

 

get | Flutter Package

Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX.

pub.dev

우선 해당 패키지를 설치해주자

처음엔 pubspec.yaml에 직접 작성하여 설치했는데 이제는 터미널에 치고 끝낸다.

 

먼저 count에 필요한 controller를 만들어주겠다.

Rx는 UI에 그려지며 실시간으로 데이터가 변화되오니 지속적으로 관찰이 필요하다는 말이다.

따라서 num이란 Int형을 0으로 초기화 해두며 동시에 .obs(상태변화를 감지하라)를 해주면 된다.

이 밖에도 모든 자료형이 사용될수 있다.

이제 메인페이지에서 increaseNum 함수를 통해 num을 1씩 더해줄 것이다.

 

추가로 Rx로 지정된 변수들은

num = 3;

이 아닌

num(3); 과 같이 대입시켜줘야한다.

 

메인페이지를 수정해보자

기본적으로 GetX는 StatefulWidget을 지양하고 있기에 최대한 사용을 자제해야한다.

해당 파일을 지워 Stateless로 만들어주자
 

다음으로 빨간줄이 뜨는 텍스트 부분과 onPressed 부분을 일단 지워주자

 

이제 메인페이지에 아까 만든 컨트롤러를 등록시켜줘야한다.

맨 아래와 같이 컨트롤러를 등록시켜주면 된다.

 

다음은 숫자를 그려보자

등록한 controller의 num의 값을 문자열로 변환하는 코드이다.

 

버튼을 눌렀을때 실행되는 함수는 아래와 같다.

 

마지막으로 제일중요한 상태관찰이다.

위와 같이 하고 버튼을 눌러도 변화가 없을것이다.

변화가 필요한 위젯을 ObX(()=> )로 감싸주면 끝이다.

이 안에 데이터가 변경되면 UI를 다시그려주게된다.

 

https://github.com/tngudzzz/flutter_demo_counter_getx

 

GDG 프로젝트 덕에

안드로이드 에뮬도 돌려보는 기회가 생겼다.

열심히 코드 수정하고 디버깅하고 있는데 갑자기

네트워크 관련 오류가 떴지만~

차분하게 에뮬레이터 와이파이 연결을 보니 !가 떠있길래 에뮬 와이파이를 껐다가 키니까 정상작동했다.

 

마침 지금 공부하는 부분과 프로젝트 부분이 흡사하여

내가 맟은 영역은 아니지만 구현해보았다.

배운거를 복습한다는 느낌으로 따라해보니 스무스하게 잘됐다.

코드에 오류없어 에뮬을 돌려봤는데..

보기와 같이 한글 깨짐 현상이 나타났다.

어렸을때 부터 컴퓨터를 달고 산 내게는 흔한 증상이였고

utf8 관련된 오류인것을 짐작하고 구글에 검색해보았다.

 

해결법은 아주 간단하다.

jsonDecode(response.body);
🔻
jsonDecode(utf8.decode(response.bodyBytes));

해주기만하면된다. 

 

상태가 변하면 setstate(){}를 통해 화면을 다시 그려줘야하는데

이러한 번거로움 없이 FutureBuilder를 통해 쉽게 구현이 가능하다.

 

FutureBuilder는 기본적으로 어떤 액션을 기다린 이후 UI를 그려주는것이다.

이때 future에는 어떤 액션을 기다릴것인가이며

builder는 기다림 이후에 그려주게될 부분이다.

아래 loadId 함수를 보면 Future 타입으로 되어있다.

또 builder 부분 snapshot은

loadId에서 기다린 결과 데이터 값을 가지고있다.

따라서 해당 snapshot이 정상적으로 데이터를 가지고 있냐?

(snapshot.hasdata)에 따라 UI를 다르게 그려줄수가있다.

 

Google sign을 구현하고 있는데 너무나 많은 오류를 보아 상당히 시간소요가 컸다....

그중에서도 SHA1키를 추출하는 과정이 상당히 짜증났는데.

조금 이해 안되는 해결 법으로 우연히 해결되었다.

 

위 처럼 알수없는 오류를 뿜어 별 방법 다 시도했지만 안됐다...

그러던중 Android Studio를 이용하여 손쉽게 추출가능하단 방법이 있다고 하여

해봤으나 역시나 뭐가 잘안됐다...

혹시나 하는생각에 Android Studio의 터미널에서  ./gradlew signingReport 해봤더니 바로되네...??

띠용.. 왜 내가쓰는 Visual Studio에서는 계속해서 오류를 뿜었던 것인가...

 

디버깅중 오류가 뜨면 항상 하는 몇 가지 방법이 있다.

1. CTRL + Z를 하여 원인을 찾아본다.

2. 디버깅 로그를 보고 대충 해석해서 찾아본다.

3. 갓 구글에 검색한다.

 

1번과 2번이 정말 중요하다고 생각하지만..

가끔 그냥 3번으로 가는게 나을꺼같다는 생각이든다..

 

MissingPluginException(No implementation found for method..

오류 해결법 알아보자..

 

쉽다. 그냥 터미널 창에 flutter clean 치고 다시 디버그 하면 된다.

 

조금 찾아보니 해당 방법이 앞으로 자주 쓰일것으로 생각 된다.

구글 검색 이전에 스탭으로 넣어야 겠다.

+ Recent posts