Choe's In coding...

오늘은 어떤 디자인을 만들어볼까나

찾아보던중 눈에 띄는 여행 티켓 관리앱이 눈에 보였고

크게 어려워 보이지 않았다.

이번에는 네비게이션바도 제작하였다.

https://dribbble.com/shots/20193355-Flight-Booking-Mobile-IOS-App

https://github.com/tngudzzz/layout_boardingApp

여렷 앱 UI를 밴치마크 하다보니 내가알고있는 방법으로는 구현 방법이 안떠오르는 것들이 몇 가지 보인다.

오늘 그중  Stack Widget과 Positioned Widget을 알아보자

Stack Widget은

위젯들을 겹치는 역할을 한다. 예를들어 아이콘 위에 아이콘을 겹치게 하고싶다면

해당 위젯을 사용하면 된다.

이런 식으로 하면된다. 

그런데 해당 결과물은 아래 아이콘만 화면에 보이게 된다.

그 이유는 사이즈도 같고 위치도 같기 떄문이다.

따라서 사이즈를 조절하거나

위치를 변경해주면 되는데

위젯의 위치를 변경할때 사용되는 위젯이 바로 Positioned Widget이다.

이 처럼 작성하면

노란색 아이콘은 회색 아이콘보다 오른쪽에서 30정도 더 움직여있을것이다.

경우에 따라 아이콘이 영역에 벗어나 짤리는 경우가 발생하기도 하는데 이럴떄는

Stack 안에 clipBehavior: Clip.none을 지정해주면

짤리는 부분없이 그려줄수 있다.

추가적으로 Positioned는 꼭 Stack으로 감싸줘야한다.

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

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

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

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

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

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

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

처음엔 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 관련된 오류인것을 짐작하고 구글에 검색해보았다.

해결법은 아주 간단하다.

해주기만하면된다. 

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

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

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

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

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

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

또 builder 부분 snapshot은

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

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

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