Choe's In coding...

지난번 AlertDialog에 Hero를 적용시키려다 조금 부자연스러워 많은 고민끝에 드디어 해결했다..

이번에는 AlertDialog를 쓰지않고 페이지라우트를 이용해 다른페이지 Container에 Hero를 입혀줬다.

이때 주의해야할 점은

모든 배경들은 투명처리 해야되며

나와 같이 ListView를 사용한다면 해당 Index 값을 페이지로 넘겨줘야한다.

Hero는 1 대 1 연결이 원칙이다.

따라서 Hero tag의 값은 나 아니면 너 이렇게 1개의 쌍으로만 이루어져야한다.

개인 프로젝트를 새롭게 시작하고

구현중에 있다.

현재 UI는 다 그렸는데 이제 DB 작업만 남았다..

앱 개발자를 준비하면 프론트, 백 둘다 빡시게 준비해야되는건가,,,

어렵다,,

오늘은 오늘 구현중 알게된 신박한 기능하나 소개하려고한다.

나는 보통 GetX를 이용하여 상태관리를 하고 있는데

수 많은 Get의 기능중

snackbar 이다.

간단한 사용법은

    Get.snackbar("저장 실패", "빈칸 없이 채워주세요",
          colorText: Mycolor().snackbarText,
          snackPosition: SnackPosition.TOP,
          backgroundColor: Mycolor().snackbarBg,
          icon: const Icon(Icons.warning_amber));

이며 설명이 필요한 부분은 따로 없어보인다.

이렇게까지 구현하고 테스트 해봤는데

사진과 같이 버튼을 막누르면 그 횟수만큼 계속해서 창이 나온다는점이다.

이를 해결하기 위해선

isSnackbarOpen를 써주면 된다.

 if (Get.isSnackbarOpen) {
      } else {
        Get.snackbar("저장 실패", "빈칸 없이 채워주세요",
            colorText: Mycolor().snackbarText,
            snackPosition: SnackPosition.TOP,
            backgroundColor: Mycolor().snackbarBg,
            icon: const Icon(Icons.warning_amber));
      }

코드와 같이 If문을 한번 걸어 현재 snackbar가 떠있는 상황인지 확인후 기능을 수행하도록

바꿔주면 아래와같이 해결된 결과를 확인할 수 있다.

앱,웹 어디든 정말 자주쓰이는 기능중 하나인 무한스크롤, 스크롤 페이지네이션이다.

사용자의 스크롤을 인식하여 노출된 데이터 끝부분에 도달하였을때 다음 데이터를 호출하여 뿌려질수 있도록 하는 것이다.

본 글에선 GetX를 이용하여 구현하였다.

먼저 ListView 안에 컨트롤을 등록시켜줘야하는데 먼저 컨트롤러를 만들자

해당 컨트롤러를 View 페이지에 등록을 해준뒤

ListView 컨트롤러에 등록하면 된다.

컨트롤러 안 onInit를 통해 사용자의 스크롤을 인식해야한다.

.addListener를 통해 인식할 수 있으며

position.pixels과  position.maxScrollExtent를 통해

사용자가 스크롤를 통해 출력된 데이터 가장 끝(하단)에 도달했다라는 것을 인식할수 있다.

그럼 이제 해당 if문 안에는 새로운 데이터를 호출하는 기능이 들어가야한다.

먼저 본인이 사용하는 api를 분석해보자

필요한 파타미터로는

userId = 앱 최초 로그인시 지정되며 변함없는 값이다.

page = 몇 번째 페이지의 데이터를 가져올것인가

limit = 한 페이지에 불러오는 데이터 최대갯수이다.

자 그럼 여기서 다뤄야할 것은 무엇인가?

바로 page이다.

이미 프로젝트에선 최대 5개(limit)로 픽스 해놨다.

유저의 데이터가 총 12개라고 가정해본다면

1 page  [1,2,3,4,5]

2 page [6,7,8,9,10]

3 page [11,12]

이렇게 호출될것이며

최초 1 page를 호출 받은 상태에서 

스크롤를 최하단으로 내린다면

2 page의 데이터를 새로받는 형식

으로 구현되면 될것이다.

View 페이지로 이동시

최초 1회는 1 page 호출

그다음부터는 page를 1씩 더해 호출하여 기존 리스트에 add하는 방식이면 된다.

여기서 중요한것이 하나 있다.

무의미한 api 호출  데이터가 없는 페이지는 호출할 필요가 없지 않겠는가?

fetchdata할때마다 받은 데이터가 비어있다면

더 이상 스크롤을 감지할 필요가 없을것이다.

팀프로젝트인 만큼 전체 코드는 올리지 못한다.

이번 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

프로젝트를 시작하니

뭔가 재미가 많이 붙었다.

어떤식으로 구현할지 고민해보게 되고..

구현을 하면 많은 문제점들을 직면하고 또 해결하고..

시간은 많이 들지만 그래도 재미있다.

코드 하나하나 모두 이해하며 짜면 좋은데

아직은 그냥 이렇게 하는건가보다 하고 클론코딩?

더 나아가 내 프로젝트에 맞게 약간 응용하는 정도이다.

지난번 Splash 화면을 구현한뒤

BottomNavigationBar와 Theme.Mode, Get.bottomSheet

그리고 카운터를 구현했다.

카운터의 경우 아직 완벽하지는 않다. 좀 더 보완하여 올리도록 할것이다.

앱 동작을 보자

Get이 정말 좋은게 간단하게 다크모드와 라이트모드를 스위치할 수 있다.

Get.isDarkMode = 현재 다크모드인가?

True => ThemeMode.light  // 참이면 라이트모드로 변경

False => ThemeMode.dark // 거짓이면 다크모드로 변경

참 간단하다...

BottomNavigationBar도 간단하게 구현이 가능하다.

구성 페이지들을 Index로 만들어준뒤 BottomNavigationBar 내에서 지정해주기만 하면된다.

해당 소스는 비공개이다.. 유튜브나 구글에 찾아보면 쉽게 구현가능할것이다.

Get.bottomSheet 또한 쉽다..

근데 이 부분을 온보딩페이지로 구성할지 해당 시트로 구성할지 고민이지만....

ontap 안에 넣어주기만하면된다.

이처럼 별거 아닌 기능만 구현했는데 벌써 완성이 된거같은 김칫국을 마시지만

한편으로는 막막한 생각이 든다....

안드로이드 스튜디오 하나만 돌려도 cpu 100% 메모리 100%를 차지한다...

이거 참 큰일이다.

핫리로드를 자주쓰지만 자주 메모리땜에 에뮬이 꺼진다...

이럴때마다 에뮬을 다시키고 디버깅을 다시 해줘야하는데

너무 오래걸린다.

프로젝트가 점점 무거워질수록 더욱 이러는거같다.

얼른 맥북하나 장만해야겠다.

오늘 만든 앱이다.

코딩세프 유튜브를 보면된다.

나는 여기에 Amount 와 Count 를 초기화 하는 기능과

getDialog 기능을 추가로 구현했다.

내가 구현한 두가지 기능만 설명 하도록 하겠다.

먼저 CartController 클래스 부분이다.

유튜브에선 addToItem 부분까지만 나와있지만

초기화 시켜주는 것을 구현했다.

구현방식은 cartItems는 리스트이기에 .clear()을 통해 리스트를 초기화 했다.

그러면 해당 리스트는 비어있는 상태가 되어 Amount 와 length 모두 0으로 될것이다.

호출 코드이다.

Get.defaultDialog를 사용하면 되며

기본적으로 title 과 middleText 부분만 작성하면 된다.